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
<template>
<div class="temp">
<table class="tempTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<template v-if="lq == ''">
<td colspan="2"><span class="table-title">权利人信息</span></td>
<td colspan="2">共有方式</td>
</template>
<template v-else>
<td colspan="2">共有方式</td>
</template>
<td :colspan="lq == '' ? 8 : 10">
<el-row>
<el-col :span="14" class="fl" style="line-height:32px">
<el-radio-group v-model="gyfs" @change="updateGyfs">
<el-radio :label="item.bsm" :disabled="+qszt !== 0 || item.disabled" :key="item.bsm"
v-for="item in gyfsList">{{ item.mc }}</el-radio>
</el-radio-group>
</el-col>
<el-col :span="10" class="fr">
<!-- <div v-show="qszt=='0'" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini" @click="addRow">
<i class="iconfont iconxinzeng"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>-->
<div v-show="+qszt === 0" class="fr" style="margin-right:20px">
<el-button class="qlrBtn" size="mini"
:disabled="+qszt !== 0 || (tableData.length > 0 && gyfs === 'PSHGSBDCQJDC000000000000DC340010')"
@click="addRow">
<i class="iconfont iconxinzeng" :disabled="+qszt !== 0"></i> 新增
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="changeRow">
<i class="iconfont iconbianji"></i> 编辑
</el-button>
<el-button class="qlrBtn" size="mini" :disabled="+qszt !== 0" @click="delRow">
<i class="iconfont iconshanchu"></i> 删除
</el-button>
</div>
</el-col>
</el-row>
</td>
</tr>
</table>
<el-table class="qlrTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
@row-dblclick="rowDbclick" border>
<el-table-column type="selection" width="40" align="center">
</el-table-column>
<el-table-column prop="qlrmc" label="权利人名称" align="center">
</el-table-column>
<el-table-column prop="qlrlxbsm_dictText" label="权利人类型" align="center">
</el-table-column>
<el-table-column prop="zjzlbsm_dictText" label="证件种类" align="center">
</el-table-column>
<el-table-column prop="zjh" label="证件号" align="center">
</el-table-column>
<el-table-column prop="dz" label="通讯地址" align="center">
</el-table-column>
<el-table-column prop="dh" label="联系电话" align="center">
</el-table-column>
</el-table>
<el-dialog :close-on-click-modal="false" title="权利人信息" :visible.sync="dialogVisible" custom-class="insetDialog"
append-to-body width="50%">
<el-form :model="formData" class="qlrForm">
<table class="zdjbxxTable" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人名称</td>
<td colspan="6">
<el-input v-model="formData.qlrmc" ref="qlrmc" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>权利人类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.qlrlxbsm" ref="qlrlxbsm">
<el-option v-for="item in $store.state.qlrlxList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.zjzlbsm" ref="zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>证件号</td>
<td colspan="6">
<el-input maxlength="18" v-model="formData.zjh" ref="zjh" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright"><i class="requisite">*</i>电话</td>
<td colspan="6">
<!-- @blur="inputBlur($event)"-->
<el-input v-model="formData.dh" ref="dh" @blur="inputBlur($event)"></el-input>
</td>
<td colspan="4" class="tdright"><i class="requisite">*</i>地址</td>
<td colspan="6">
<el-input v-model="formData.dz" ref="dz" @blur="inputBlur($event)"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">国家</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gjbsm">
<el-option v-for="item in $store.state.gjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">户籍所在省市</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.hjszssbsm">
<el-option v-for="item in $store.state.ssList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">性别</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.xbbsm">
<el-option v-for="item in $store.state.xbList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">邮编</td>
<td colspan="6">
<el-input v-model="formData.yb" />
</td>
</tr>
<tr>
<td colspan="4" class="tdright">所属行业</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.sshy">
<el-option v-for="item in $store.state.sshyList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">电子邮件</td>
<td colspan="6">
<el-input v-model="formData.dzyj" />
</td>
</tr>
<tr>
<th colspan="20">法人信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">法定代表人或负责人姓名</td>
<td colspan="6">
<el-input v-model="formData.fr.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.fr.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">证件号码</td>
<td colspan="6">
<el-input v-model="formData.fr.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="formData.fr.dh" />
</td>
</tr>
<tr>
<th colspan="20">代理人信息</th>
</tr>
<template v-for="(item, index) in formData.dlrList">
<tr :key="item.index">
<td :rowspan="(formData.dlrList.length - 1) * 2 + 2" v-if="index == 0" class="btnCol">
<span :style="{ 'padding-top': (formData.dlrList.length - 1) * 36 + 20 + 'px' }">
<i v-show="index == 0" class="iconfont iconicon-test2" @click="handleClick(item, index, 'add')"></i>
</span>
<!-- <div class="line" v-show=" index != formData.dlrList.length-1"></div> -->
</td>
<td rowspan="2" class="minusBtnCol">
<span>
<i class="iconfont icon-" @click="handleClick(item, index, 'minus')"></i>
</span>
</td>
<td class="tdright" colspan="2">代理人姓名</td>
<td colspan="6">
<el-input v-model="item.dlrfrmc" />
</td>
<td colspan="4" class="tdright">证件类型</td>
<td colspan="6">
<el-select class="formSelect" v-model="item.zjzlbsm">
<el-option v-for="item in $store.state.zjzlList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
</tr>
<!-- <tr :key="item.dh">-->
<tr :key="'dh' + index">
<td class="tdright" colspan="2">证件号码</td>
<td colspan="6">
<el-input v-model="item.zjh" />
</td>
<td colspan="4" class="tdright">电话</td>
<td colspan="6">
<el-input v-model="item.dh" />
</td>
</tr>
</template>
<tr>
<th colspan="20">权利信息</th>
</tr>
<tr>
<td colspan="4" class="tdright">共有方式</td>
<td colspan="6">
<el-select class="formSelect" v-model="formData.gyfsbsm" disabled>
<el-option v-for="item in $store.state.gyfsList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</td>
<td colspan="4" class="tdright">权利比例(%)</td>
<td colspan="6">
<el-input v-model="formData.qlbl"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">房产证号</td>
<td colspan="6">
<el-input v-model="formData.fczh"></el-input>
</td>
<td colspan="4" class="tdright">土地证号</td>
<td colspan="6">
<el-input v-model="formData.tdzh"></el-input>
</td>
</tr>
<tr>
<td colspan="4" class="tdright">共有情况</td>
<td colspan="12">
<el-input v-model="formData.gyqk"></el-input>
</td>
</tr>
</table>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="addNewQlrInfo">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
// import { insertQlrDlrFr, getQlrInfoByGlbsm, updateQlrDlrFr, deleteQlrDlrFrByQlrbsm, updateGyGyQlrQk, getQlrByGlbsmAndType } from "@api/qlr";
export default {
props: {
qszt: {
type: String,
default: "0",
},
title: {
type: String,
default: "",
},
topHeight: {
type: String,
default: "15vh",
},
bsm: {
type: String,
default: "",
},
type: {
type: String,
default: "",
},
lq: {
type: String,
default: "",
}
},
data () {
return {
update: false,
gyfs: this.$store.state.gyfsList[0].bsm,
tableData: [],
gyfsList: [],
//表格选中项
multipleSelection: [],
dialogVisible: false,
formData: {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
lqqlrtype: ""
},
glbsm: '',
rules: [],
};
},
methods: {
inputBlur (e) {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red";
e.target.style.boxSizing = 'border-box';
}
},
//新增行数据
addRow () {
console.log(this.gyfs, '共有方式')
this.update = false;
let flag = false;
for (let i = 0; i < this.$store.state.gyfsList.length; i++) {
let item = this.$store.state.gyfsList[i];
if (item.mc === "单独所有" && item.bsm === this.gyfs) {
flag = true;
}
}
if (flag) {
if (this.tableData.length > 0) {
this.$message({
message: "当前方式不可再新增权利人",
type: "warning",
});
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
} else {
this.formData.gyfsbsm = this.gyfs;
this.dialogVisible = true;
}
},
//确认权利人信息按钮；可以进行新增；可以进行更新；
addNewQlrInfo () {
this.rules = [
{
data: this.formData.qlrmc,
name: '权利人名称',
dom: this.$refs.qlrmc,
rule: /^\s*$/g, //非空
},
{
data: this.formData.qlrlxbsm,
name: '权利人类型',
dom: this.$refs.qlrlxbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjzlbsm,
name: '证件类型',
dom: this.$refs.zjzlbsm,
rule: /^\s*$/g, //非空
},
{
data: this.formData.zjh,
name: '证件号',
dom: this.$refs.zjh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dh,
name: '电话',
dom: this.$refs.dh,
rule: /^\s*$/g, //非空
},
{
data: this.formData.dz,
name: '地址',
dom: this.$refs.dz,
rule: /^\s*$/g, //非空
},
]
let flag = true;
this.rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
flag = false;
return false
}
console.log(this.tableData, '权利人信息')
console.log(this.$store.state.gyfsList[0].bsm, '确定之后共有方式')
})
this.$nextTick(() => {
if (flag) {
//todo 权利人页面调整
this.formData.addQjDlrFrRequest = [];
this.formData.glbsm = this.bsm;
//将代理人，法人数据合在一起，名称为addQjDlrFrRequest；
//法人的type字段类型为0,
this.formData.fr.type = 0;
this.formData.addQjDlrFrRequest.push(this.formData.fr);
for (let k = 0; k < this.formData.dlrList.length; k++) {
//代理人的type字段类型为1,
this.formData.dlrList[k].type = 1;
this.formData.addQjDlrFrRequest.push(this.formData.dlrList[k]);
}
//林权权利人类型判断
this.formData.lqqlrtype = this.lq;
//如果是从更新按钮点击确定的则进行更新操作，如果不是，则进行添加操作
if (this.update) {
console.log(this.formData)
updateQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.$message.success("修改完成！");
this.getQlrInfo(this.bsm);
this.update = false;
}
})
} else {
insertQlrDlrFr(this.formData).then((res) => {
if (res.code === 200) {
this.dialogVisible = false;
this.tableData.push(this.formData);
this.getQlrInfo(this.bsm);
Object.assign(this.$data, this.$options.data())
}
})
}
}
})
},
//修改行数据
changeRow () {
if (this.multipleSelection.length === 1) {
this.dialogVisible = true;
this.update = true;
this.formData = this.multipleSelection[0];
if (this.multipleSelection[0].frList.length > 0) {
this.formData.fr = this.multipleSelection[0].frList[0];
}
} else {
this.$message({
message: "请选择一条信息后继续操作",
type: "warning",
});
}
},
updateGyfs (val) {
console.log(val, this.type)
updateGyGyQlrQk(this.bsm, this.type, val).then((res) => {
if (res.code === 200) {
console.log("修改完成！")
//todo 修改该建筑物的所有权利人的相关共有方式
}
})
},
//父组件改变子组件的共有方式
changeGyfs (val) {
this.gyfs = val;
},
//行双击事件
rowDbclick (row) {
if (+this.qszt == 0) {
this.dialogVisible = true;
this.update = true;
this.formData = row;
if (row.frList.length > 0) {
this.formData.fr = row.frList[0];
}
}
},
// inputBlur(e){
// if(e.target.value!=''){
// console.log(e.target.value)
// console.log(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value)))
// if(!(/^1(3|4|5|6|7|8|9)d{9}$/.test(e.target.value))){
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }else {
// e.target.style.border=""
// }
// }else{
// e.target.style.border="1px solid red";
// e.target.style.boxSizing = 'border-box';
// }
// },
//删除行数据
delRow () {
if (this.multipleSelection.length > 0) {
let qlrbsms = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
qlrbsms.push(this.multipleSelection[i].qlrbsm)
}
console.log(qlrbsms)
deleteQlrDlrFrByQlrbsm(qlrbsms).then((res) => {
if (res.code === 200) {
this.$message.success("删除完成！")
this.getQlrInfo(this.bsm);
}
})
} else {
this.$message({
message: "请至少选择一条信息后继续操作",
type: "warning",
});
}
},
//选中表格某一项
handleSelectionChange (val) {
this.multipleSelection = val;
},
//供父组件调用来获取共有方式
getQlgyfsData () {
return this.gyfs;
},
//供父组件调用来获取权利人表格数据
getQlrxxData () {
return this.tableData;
},
//增删代理人
handleClick (obj, ind, type) {
if (type === "add") {
this.formData.dlrList.push({
id: Math.random(),
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
});
} else {
this.formData.dlrList.forEach((item, index) => {
if (index == ind && this.formData.dlrList.length > 1) {
this.formData.dlrList.splice(ind, 1);
}
});
}
},
getQlrInfo (bsm) {
if (this.lq == "") {
getQlrInfoByGlbsm(bsm).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
} else {
let params = {
bsm: bsm,
type: this.lq
}
getQlrByGlbsmAndType(params).then((res) => {
if (res.code) {
if (res.result != null) {
this.tableData = res.result;
if (this.tableData.length === 0) {
this.gyfs = this.$store.state.gyfsList[0].bsm;
} else {
this.gyfs = res.result[0].gyfsbsm;
}
}
}
})
}
}
},
created () {
this.gyfsList = this.$store.state.gyfsList;
},
mounted () {
this.getQlrInfo(this.bsm);
},
watch: {
tableData: {
handler: function (v) {
this.gyfsList[0].disabled = v.length > 1;
},
deep: true
},
dialogVisible (n) {
if (n === false) {
this.formData = {
addQjDlrFrRequest: [],
dlrList: [
{
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
],
fr: {
dh: "",
dlrfrmc: "",
qlrbsm: "",
zjh: "",
zjzlbsm: "",
},
bz: "",
dh: "",
dz: "",
dzyj: "",
fczh: "",
fzjg: "",
gjbsm: "PSHGSBDCQJDC000000000000DC350010", //默认中国
glbsm: "",
gyfsbsm: "",
gyqk: "",
gzdw: "",
hjszssbsm: "",
isdel: 0,
qlbl: "",
qlrlxbsm: "",
qlrmc: "",
sshy: "",
sxh: 0,
tdzh: "",
xbbsm: "",
yb: "",
zjh: "",
zjzlbsm: "",
}
}
},
"formData.qlrlxbsm": function (val) {
if (val != '') {
this.$refs.qlrlxbsm.$el.style.border = '';
}
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
table {
border-bottom: 0;
background-color: #fff;
font-size: 14px;
width: 100%;
table-layout: fixed;
.qlrBtn {
border: 0;
font-size: 14px;
}
.qlrBtn:hover {
background-color: none !important;
}
.iconfont {
font-size: 14px !important;
}
.span {
color: #409eff;
margin-right: 10px;
cursor: pointer;
}
.noEdit {
color: #606266;
margin-right: 10px;
cursor: not-allowed;
}
.el-radio {
margin-right: 20px !important;
}
td {
text-align: center;
padding: 8px 0;
}
}
.table-title {
font-weight: 700;
font-size: 15px;
}
.el-table th {
background-color: #fff !important;
}
el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
border-color: black;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: rgba(0, 0, 0, 0);
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid#E6E6E6;
}
.el-table td,
.el-table th {
padding: 12px 0;
color: #333 !important;
font-weight: normal;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid#E6E6E6;
border-color: #E6E6E6 !important;
}
.qlrTable {
border-color: #E6E6E6 !important;
border-bottom: 0;
border-right: 0;
position: relative;
top: -1px;
.el-input__inner {
height: 20px;
margin: 0;
line-height: 20px;
outline: none;
border: none;
color: #606764;
overflow: visible;
cursor: text;
text-align: center;
}
}
}
.insetDialog {
.qlrForm {
height: 500px;
overflow-y: scroll;
}
.zdjbxxTable {
margin: 10px 0;
background-color: #fff;
font-size: 14px;
width: 100%;
border-bottom: 1px solid #000;
.btnCol,
.minusBtnCol {
position: relative;
padding-right: 0;
span {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
padding-right: 10px;
padding-top: 20px;
}
.line {
width: 100%;
height: 2px;
background: #fff;
}
i {
color: #66b1ff;
font-size: 30px;
cursor: pointer;
z-index: 1;
}
}
.minusBtnCol {
i {
color: #FA6400;
}
}
th {
height: 36px;
line-height: 36px;
}
td {
text-align: right;
height: 36px;
}
/deep/.el-input__inner {
margin: 0;
height: 36px;
outline: none;
border: none;
color: #606764;
overflow: visible;
text-align: left;
cursor: text;
}
.percent68 {
width: 68% !important;
float: left;
position: relative;
top: 7px;
}
.percent30 {
width: 30% !important;
float: left;
}
.el-input__icon {
line-height: 37px;
}
.el-select {
width: 100%;
}
}
.dialog-footer {
width: 160px;
margin: 20px auto 0;
}
}
</style>
<template>
<div class="temp">
<div class="qlxzAdd fl">
<span>权利性质</span>
<i class="iconfont iconicon-test2" v-if="formData.qszt == '0'" @click="handleClick(0, 'add')"></i>
<i class="iconfont iconicon-test2" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</div>
<el-row class="qlxzModule fl" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="1" class="btnCol " :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<i v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
@click="handleClick(index, 'minus')"></i>
<i v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 18 + 'px' }" class="iconfont icon- qlxzMinus"
style="cursor: not-allowed;"></i>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol tdytAdd" :key="childIndex + '17'"
:class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<template>
<span v-show="childIndex == 0"
:style="{ 'margin-top': (items.list.length - 1) * 57 - 40 + 'px' }">土地用途</span>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt == '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }"
@click="handleInClick(index, childIndex, 'add')"></i>
<i class="iconfont iconicon-test1" v-show="childIndex == 0 && formData.qszt != '0'"
:style="{ 'margin-top': (items.list.length - 1) * 57 + 'px' }" style="cursor: not-allowed;"></i>
</template>
</el-col>
<el-col :span="1" class="btnCol tdytMinus pr10" :key="childIndex + '18'"
:class="childIndex > 0 ? 'childYT' : ''">
<i class="iconfont iconicon-test" v-if="formData.qszt == '0'"
@click="handleInClick(index, childIndex, 'minus')"></i>
<i class="iconfont iconicon-test" v-if="formData.qszt != '0'" style="cursor: not-allowed;"></i>
</el-col>
<template v-if="hasSyqx">
<el-col :span="3" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree class="formSelect percent30" v-if="show" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyqssj" type="date" ref="tdsyqssj"
:picker-options="childItem.pickerStart" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>年限</li>
</ul>
</el-col>
<el-col :span="3" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<input type="text" ref="syqx" @blur="inputBlur($event, false)" maxlength="3"
onkeyup="value=value.replace(/[^\d]/g,'')"
@input="sumTime(index, childIndex, childItem.syqx, childItem.syqx)" :disabled="formData.qszt != '0'"
v-model="childItem.syqx" class="formInput" />
</li>
</ul>
</el-col>
<el-col class="pr10" :span="3" :key="childIndex + '2'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>等级</li>
<li>等级</li>
<li><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="4" :key="childIndex + '3'" class="noRightBorder" :class="childIndex > 0 ? 'childYT ' : ''">
<ul>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.pzdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-select :disabled="formData.qszt != '0'" class="formSelect percent30" v-model="childItem.sjdjbsm">
<el-option v-for="item in $store.state.tddjList" :key="item.bsm" :label="item.mc" :value="item.bsm">
</el-option>
</el-select>
</li>
<li>
<el-date-picker :disabled="formData.qszt != '0'" v-model="childItem.tdsyjssj" type="date" ref="tdsyjssj"
@blur="inputBlur($event, true)" :picker-options="childItem.pickerEnd"
@input="endTime(index, childIndex, $event)" value-format="yyyy-MM-dd" placeholder="选择日期">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<template v-if="!hasSyqx">
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10"><i class="requisite">*</i>批准用途</li>
<li class="pr10"><i class="requisite">*</i>实际用途</li>
<li class="pr10"><i class="requisite">*</i>土地使用起始时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="pzytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" class="formSelect percent30" :default-expand-all="defaultExpandAll"
ref="sjytdm" :multiple="multiple" :placeholder="placeholder" :disabled="formData.qszt != '0'"
:data="$store.state.tdytList" :props="treeProps" :check-strictly="checkStrictly"
:clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" ref="tdsyqssj" :disabled="formData.qszt != '0'"
:picker-options="childItem.pickerStart" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li class="pr10">地类编码</li>
<li class="pr10">地类编码</li>
<li class="pr10"><i class="requisite">*</i>土地使用结束时间</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" :disabled="formData.qszt != '0'" v-model="childItem.pzytdm"
class="formInput" />
</li>
<li>
<input type="text" :disabled="formData.qszt != '0'" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" :disabled="formData.qszt != '0'" ref="tdsyjssj" type="date"
value-format="yyyy-MM-dd" :picker-options="childItem.pickerEnd" placeholder="选择日期"
@blur="inputBlur($event, true)" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
</template>
<div class="title">
<el-select-tree v-if="show" class="formSelect" :disabled="formData.qszt != '0'"
:default-expand-all="defaultExpandAll" :multiple="multiple" :placeholder="placeholder"
:data="$store.state.qlxzList" :props="treeProps" :check-strictly="checkStrictly" :clearable="clearable"
ref="qlxzdm" v-model="items.qlxzdm"></el-select-tree>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
formData: {
type: Object,
default: () => {
return {};
},
},
hasSyqx: {
type: Boolean,
default: false
}
},
data () {
return {
//树型结构
show: true,
clearable: true,
defaultExpandAll: true,
multiple: false,
placeholder: "请选择",
disabled: false,
checkStrictly: true,
treeProps: {
value: "dm",
children: "children",
label: "mc",
},
countList: [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
],
outNum: 0,
rulesResult: true,//权利性质表单校验结果
};
},
created () { },
mounted () {
},
methods: {
startTime (index, childIndex) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerEnd = {
disabledDate: (time) => {
if (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
} else {
return time.getTime() < Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
//年限暂时不算
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
sumTime (index, childIndex, syqx, e) {
this.$refs.syqx.forEach((item, index) => {
if (item.value == syqx) {
this.$refs.tdsyjssj[index].$el.style.border = ""
}
})
let startTime = this.countList[index].list[childIndex].tdsyqssj;
this.countList[index].list[childIndex].tdsyjssj = Number(startTime.substring(0, 4)) + Number(syqx) + startTime.slice(4, 10);
},
endTime (index, childIndex, e) {
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
// this.countList[index].list[childIndex].syqx=endYear-startYear;
}
},
//外层操作
handleClick (ind, type) {
let outsideObj = {
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
pickerStart: {},
pickerEnd: {},
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
},
],
};
if (type === "add") {
this.countList.push(outsideObj);
this.outNum++;
} else {
this.countList.forEach((item, index) => {
if (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
}
},
reset () {
this.countList = [
{
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
qlxzdm: "",
qlxzmc: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
pickerStart: {},
pickerEnd: {},
tdsyqssj: "",
tdzh: "",
},
],
},
];
},
//内层操作
handleInClick (index, childIndex, type) {
let insideObj = {
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
pickerStart: {},
pickerEnd: {},
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
if (type === "add") {
this.countList[index].list.splice(childIndex + 1, 0, insideObj);
} else {
this.countList[index].list.forEach((item, childInd) => {
if (childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
}
this.hasBorderOrNot();
},
//判断是否显示边框
hasBorderOrNot () {
this.countList.forEach((item, index) => {
if (index == this.countList.length - 1) {
item.hasNotBorder = true;
} else {
item.hasNotBorder =
item.isInside && !this.countList[index + 1].isInside ? true : false;
}
});
},
getQlxzDataList () {
return this.countList;
},
getRules () {
let rules = [];
let temp = 0;
this.countList.forEach((item, index) => {
rules.push({
data: this.countList[index].qlxzdm,
name: '权利性质',
dom: this.$refs.qlxzdm[index],
rule: /^\s*$/g, //非空
})
item.list.forEach((j, ind) => {
rules.push(
{
data: item.list[ind].tdsyqssj,
name: '土地使用起始时间',
dom: this.$refs.tdsyqssj[temp + ind],
// val:this.$refs.tdsyqssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].tdsyjssj,
name: '土地使用结束时间',
dom: this.$refs.tdsyjssj[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].pzytdm,
name: '批准用途',
dom: this.$refs.pzytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
{
data: item.list[ind].sjytdm,
name: '实际用途',
dom: this.$refs.sjytdm[temp + ind],
// val:this.$refs.tdsyjssj[temp+ind].value,
rule: /^\s*$/g, //非空
},
)
if (this.hasSyqx) {
rules.push(
{
data: item.list[ind].syqx,
name: '使用期限',
dom: this.$refs.syqx[temp + ind],
// val:this.$refs.syqx[temp+ind].value,
rule: /^\s*$/g, //非空
}
)
}
if (ind == item.list.length - 1) {
temp += item.list.length;
}
})
})
this.rulesResult = true;
rules.forEach(item => {
if (item.rule.test(item.data) || item.data == null) {
if (item.dom.$el) {
item.dom.$el.style.border = '1px solid red';
item.dom.$el.style.boxSizing = 'border-box';
} else {
item.dom.style.border = '1px solid red';
item.dom.style.boxSizing = 'border-box';
}
// this.$message({
// // message: item.name+'不能为空',
// message: '不能为空',
// type: "warning",
// });
this.rulesResult = false;
return false
}
})
// console.log(rules,'rules');
},
getRulesResult () {
return this.rulesResult
},
inputBlur (e, flag) {
if (flag) {
if (e.value != '') {
e.$el.style.border = ""
} else {
e.$el.style.border = "1px solid red"
e.$el.style.boxSizing = 'border-box';
}
} else {
if (e.target.value != '') {
e.target.style.border = ""
} else {
e.target.style.border = "1px solid red"
e.target.style.boxSizing = 'border-box';
}
}
},
//后续考虑在点击加减号时操作校验规则
// addRules(){
// this.tempQssj.push()
// },
// minusRules(){
// },
},
watch: {
countList: {
handler: function (newVal, oldVal) {
newVal.forEach((i, ind) => {
if (i.qlxzdm != '' && i.qlxzdm != null) {
console.log(this.$refs.qlxzdm, 'this.$refs.qlxzdm[ind]');
i.qlxzmc = this.$refs.qlxzdm[ind].name;
this.$refs.qlxzdm[ind].$el.style.border = ""
}
i.list.forEach((item, index) => {
if (item.sjytdm != '' && item.sjytdm != null) {
this.$refs.sjytdm[ind].$el.style.border = ""
}
if (item.pzytdm != '' && item.pzytdm != null) {
this.$refs.pzytdm[ind].$el.style.border = ""
}
})
})
},
deep: true
},
}
};
</script>
<style lang="scss">
.temp {
width: 100%;
height: 100%;
.iconfont {
cursor: pointer;
}
.qlxzAdd {
width: 100px;
height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
span {
font-size: 14px;
height: 140px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
margin-top: -70px;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: -18px;
left: 55%;
z-index: 1;
}
}
.qlxzModule {
width: calc(100% - 102px);
height: auto;
position: relative;
border-bottom: 1px solid #E6E6E6;
.pr10 {
padding-right: 10px !important;
}
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
.qlxz {
line-height: 34px;
}
.qlxzMinus {
color: #FA6400;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
z-index: 1;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
.el-input__inner {
height: 34px;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 95.83333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.tdytAdd {
width: 100px;
}
.tdytAdd,
.tdytMinus {
span {
font-size: 14px;
height: 114px;
text-align: center;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
top: 50%;
left: 30%;
}
i {
color: #66b1ff;
font-size: 30px;
position: absolute;
top: 50%;
margin-top: 0px;
left: 55%;
z-index: 1;
}
}
.tdytMinus {
i {
color: #FA6400;
left: 50%;
margin-left: -18px;
}
}
.childYT {
i {
top: 50%;
margin-top: -18px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 34px !important;
position: relative;
top: -1px;
}
}
}
</style>
<template>
<div class="temp">
<el-row class="qlxzModule" v-for="(items, index) in countList" :key="items.id">
<template v-for="(childItem, childIndex) in items.list">
<el-col :span="2" class="btnCol" :key="childIndex + '1'" :class="childIndex > 0 ? 'childYT noTopBorder' : ''">
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outAdd"
@click="handleClick(index, 'add')">+</el-button>
<el-button v-show="childIndex < 1" type="primary" class="changeBtn addMinus outMinus"
@click="handleClick(index, 'minus')">-</el-button>
<div :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" v-if="items.isInside"></div>
</el-col>
<el-col :span="2" class="btnCol" :key="childIndex + '8'" :class="childIndex > 0 ? 'childYT' : ''">
<!-- <template v-if="childIndex>0"> -->
<span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
<el-button type="primary" class="changeBtn addMinus inAdd" @click="handleInClick(index, childIndex, 'add')">+
</el-button>
<el-button type="primary" class="changeBtn addMinus inMinus"
@click="handleInClick(index, childIndex, 'minus')">-</el-button>
<!-- </template> -->
</el-col>
<el-col :span="5" :key="childIndex + '7'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>批准用途</li>
<li>实际用途</li>
<li>土地使用起始时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '6'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.pzytdm"></el-select-tree>
</li>
<li>
<el-select-tree v-if="show" :default-expand-all="defaultExpandAll" :multiple="multiple"
:placeholder="placeholder" :disabled="disabled" :data="$store.state.tdytList" :props="treeProps"
:check-strictly="checkStrictly" :clearable="clearable" v-model="childItem.sjytdm"></el-select-tree>
</li>
<li>
<el-date-picker v-model="childItem.tdsyqssj" :picker-options="childItem.pickerStart" type="date"
value-format="yyyy-MM-dd" placeholder="选择日期" @input="startTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '5'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>地类编码</li>
<li>地类编码</li>
<li>土地使用结束时间<i class="requisite">*</i></li>
</ul>
</el-col>
<el-col :span="5" :key="childIndex + '4'" :class="childIndex > 0 ? 'childYT' : ''">
<ul>
<li>
<input type="text" style="top: -1px;" v-model="childItem.pzytdm" class="formInput" />
</li>
<li>
<input type="text" v-model="childItem.sjytdm" class="formInput" />
</li>
<li>
<el-date-picker v-model="childItem.tdsyjssj" type="date" value-format="yyyy-MM-dd"
:picker-options="childItem.pickerEnd" placeholder="选择日期" @input="endTime(index, childIndex)">
</el-date-picker>
</li>
</ul>
</el-col>
</template>
<div class="title">
<el-select class="formSelect" v-model="items.qlxzdm">
<el-option v-for="item in $store.state.qlxzList" :key="item.dm" :label="item.mc" :value="item.dm">
</el-option>
</el-select>
</div>
</el-row>
</div>
</template>
<script>
// import { getDdicByMC } from "@api/common";
export default {
props: {
// widtd: {
// type: String,
default: "70%",
,
a () {
return {
//树型结构
how: true,
arable: true,
aultExpandAll: true,
tiple: false,
ceholder: "请选择",
abled: false,
ckStrictly: true,
eProps: {
lue: "dm",
ildren: "children",
bel: "mc",
ntList: [
id: Math.random(),
isInside: false,
hasNotBorder: false,
bsm: "", //权利性质标识码
lbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
lxzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
jytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
pickerStart: {},
pickerEnd: {},
tdzh: "",
},
Num: 0,
ed () { },
hods: {
外层操作
ndleClick (ind, type) {
outsideObj = {
Math.random(),
Inside: false,
sNotBorder: false,
"", //权利性质标识码
bsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
xzdm: "",
zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
list: [
{
pzdjbsm: "",
pzdjmc: "",
pzytdm: "",
pzytmc: "",
pzytmj: 0,
qlxzbsm: "",
sjdjbsm: "",
sjdjmc: "",
sjytdm: "",
sjytmc: "",
sjytmj: 0,
syqx: "",
tdsyjssj: "",
tdsyqssj: "",
tdzh: "",
};
(type === "add") {
is.countList.push(outsideObj);
is.outNum++;
lse {
.countList.forEach((item, index) => {
f (index == ind && this.countList.length > 1) {
this.countList.splice(index, 1);
}
});
this.outNum--;
Click (index, childIndex, type) {
eObj = {
",
,
"",
"",
: 0,
m: "",
m: "",
"",
: "",
: "",
: 0,
"",
jssj: "",
sj: "",
: "",
e === "add") {
ountList[index].list.splice(childIndex + 1, 0, insideObj);
ountList[index].list.forEach((item, childInd) => {
(childIndex == childInd && this.countList[index].list.length > 1) {
this.countList[index].list.splice(childIndex, 1);
}
});
s.hasBorderOrNot();
是否显示边框
orderOrNot () {
s.countList.forEach((item, index) => {
(index == this.countList.length - 1) {
m.hasNotBorder = true;
{
sNotBorder =
sInside && !this.countList[index + 1].isInside ? true : false;
aList () {
this.countList;
时间判断
tTime (index, childIndex) {
tartTime = this.countList[index].list[childIndex].tdsyqssj;
endTime = this.countList[index].list[childIndex].tdsyjssj;
s.countList[index].list[childIndex].pickerEnd = {
bledDate: (time) => {
f (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
lse {
rn time.getTime() < Date.now();
t.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
ear = new Date(startTime).getFullYear();
ear = new Date(endTime).getFullYear();
ime (index, childIndex, e) {
onsole.log(e, 'eeeeee');
let startTime = this.countList[index].list[childIndex].tdsyqssj;
let endTime = this.countList[index].list[childIndex].tdsyjssj;
this.countList[index].list[childIndex].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
}
}
if (Object.keys(startTime).length > 0 && Object.keys(endTime).length > 0) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
}
},
},
};
</script>
<style lang="scss">
.temp {
width: 100%;
.qlxzModule {
height: auto;
position: relative;
border-bottom: 1px solid #e6e6e6;
.el-col {
// height: 100%;
border-right: 1px solid #E6E6E6;
position: relative;
text-align: right;
padding-right: 10px;
.qlxz {
line-height: 34px;
}
ul {
margin-top: 34px;
li {
height: 37px;
line-height: 37px;
text-decoration: none;
border-bottom: 1px solid #e6e6e6;
.el-select {
width: 100%;
}
.el-input {
width: 100%;
}
.el-input__inner {
height: 34px;
}
input {
position: relative;
top: -2px;
height: 35px;
width: calc(100% - 1px) !important;
}
}
li:last-child {
border-bottom: none;
}
}
.whiteItem {
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
bottom: -1px;
left: 0;
}
.itemShow {
bottom: 2px;
}
}
.childYT {
height: 114px;
border-top: 1px solid #E6E6E6;
ul {
margin-top: 0;
li {
.el-input__inner {
height: 29px;
}
}
}
.changeBtn {
margin-top: -48px;
}
.el-button+.el-button {
margin-top: 4px;
}
}
.noTopBorder {
border-top: 0;
}
.noRightBorder {
border-right: 0;
}
.el-col:nth-last-child(2) {
border-right: none;
}
.title {
width: 83.33333%;
height: 34px;
line-height: 34px;
background-color: #fff;
border-bottom: 1px solid #E6E6E6;
position: absolute;
right: 0;
top: 0;
.formSelect {
top: -1px;
width: 100%;
.el-input__inner {
height: 32px;
}
}
}
}
.btnCol {
position: relative;
height: 146px;
.changeBtn {
width: 46px;
height: 46px;
font-size: 30px;
padding: 4px 6px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -23px;
}
.el-button+.el-button {
margin-left: -23px;
margin-top: 16px;
}
}
.el-row:nth-last-child(1) {
border-bottom: none;
}
/deep/.el-select-tree {
width: 100%;
.el-input__inner {
height: 30px !important;
}
}
}
</style>
<template>
<div class="tree_item_box">
<div class="column-start-start linkLine_default" v-for="(item, s_index) in list" :key="s_index" :class="{
linkLine_first: (s_index === 0) & (list.length > 1),
linkLine_half_top: s_index === 0 && list.length === 1,
linkLine_last: s_index === list.length - 1 && s_index !== 0,
third_layer: !item.children,
second_layer: item.children,
curNode: $route.query.bsm && $route.query.bsm == item.bsm,
zxxNode: item.qszt,
iszd: item.qszt && item.type == 'zd',
isdz: item.qszt && item.type == 'dz',
iszrz: item.qszt && item.type == 'zrz',
isgzw: item.qszt && item.type == 'gzw'
}">
<div class="row-flex-start basic_banner" @click="itemClick(item)" @dblclick="dbclick(item, item.zdbsm)" :class="{
active_color: item.expand,
}">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item, list)" :class="{
active_color: item.expand
}" :ref="($route.query.bsm && $route.query.bsm == item.bsm) ? 'curZxx' : ''" :data-zdbsm="item.zdbsm"
:title=item.mc>
<i v-show="!islpb && !item.qszt && !item.type" class="iconfont iconguoyou" style="margin-right:6px"></i>
<template v-if="islpb && item.type == 'ljz' && item.children.length > 0">
<i v-if="!item.expand" class="iconfont iconxiala lpbTree-node"></i>
<i v-if="item.expand" class="iconfont iconxialazhankai lpbTree-node"></i>
</template>
<!-- <i v-show="islpb && item.expand && item.children.length > 0" class="iconfont iconxiala" style="margin-right:6px"></i>
<i v-show="islpb && !item.expand && item.children.length > 0" class="iconfont iconxialazhankai" style="margin-right:6px"></i> -->
<span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != '' && item.bhqkbsm != null)">
<!-- <span class="qsztFont" style="color: #9e9b9b">变</span> -->
<i
:class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconbianing' : 'iconfont iconbian'"></i>
</span>
<template v-else>
<span class="qsztImg" v-if="item.qszt == '0'">
<!-- <span class="qsztFont" style="color: #2FA3FA; ">临</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconlining' : 'iconfont iconlin'"
style="color: #F7B500;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '1'">
<!-- <span class="qsztFont" style="color: #1AD6E1; ">正</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconzhenging' : 'iconfont iconzheng'"
style="color: #15D7E2;"></i>
</span>
<span class="qsztImg" v-if="item.qszt == '2'">
<!-- <span class="qsztFont" style="color: #45AEFD; ">现</span> -->
<i :class="$route.query.bsm && $route.query.bsm == item.bsm ? 'iconfont iconxianing' : 'iconfont iconxian'"
style="color: #2FA3FA;"></i>
</span>
</template>
<i class="iconfont iconziranchuang1 mr4" v-if="item.type == 'zrz'"></i>
<i class="iconfont iconduochuang1 mr4" v-if="item.type == 'dz'"></i>
<i class="iconfont icongouzhuwu mr4" v-if="item.type == 'gzw'"></i>
<span v-if="islpb">({{ item.type | bdcLxFilter }})</span>
<span>{{ item.mc }}</span>
</div>
<div v-if="item.children" class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
}"></div>
<div v-if="item.children == null" class="reTree_icon" :class="{
reTree_default_icon: item.dm != 'G' && item.dm != 'J' && item.dm != 'Z',
reTree_expand_icon: item.dm == 'G' || item.dm == 'J' || item.dm == 'Z',
}" :style="{
height: 10 + 'px',
width: 10 + 'px',
}"></div>
</div>
<line-item :list="item.children" v-on="$listeners" :islpb="islpb" :size="size"
v-if="item.expand && item.children && item.children.length > 0"></line-item>
</div>
</div>
</template>
<script>
// import { getZdDetailList } from "@api/common"
export default {
name: "line-item",
props: {
list: {
ype: Array,
ault: () => {
turn [];
,
},
formatData: {
ype: Array,
ault: () => {
turn [];
: {
e: Number,
ault: 16,
ble: {
e: Boolean,
ault: false,
b: {
e: Boolean,
efault: false,
}
,
a () {
rn {
e: null,
reeXzqHeight: 0,
linshi: require("@/image/lpb/lin.png"),
zhengshi: require("@/image/lpb/zheng.png"),
ianshi: require("@/image/lpb/xian.png"),
}
,
nted () {
onsole.log(this.$refs.curZxx,'this.$refs.curZxx');
this.$refs.curZxx) {
onsole.log(this.$refs.curZxx[0].dataset.zdbsm);
his.$store.state.oldZdbsm = this.$refs.curZxx[0].dataset.zdbsm;
: {
Click (item) {
self = this;
开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
learTimeout(self.time);
elf.time = setTimeout(() => {
em.expand = item.expand == undefined ? true : !item.expand;
self.$emit("itemClick", item);
source = ''
itch (this.$route.path) {
ase '/add':
source = '1,2'
break;
case '/change':
source = '2'
break;
case '/panel':
source = '0,1,2'
break;
e '/modify':
source = '1'
break;
e '/search':
source = '0,1,2'
break;
default:
break;
目录树的所有权类型单击时加载子节点
(!item.children && !item.type) {
et data = {
xzqbsm: item.xzq,
djqbsm: item.djq,
djzqbsm: item.djzq,
syqlx: item.dm,
source: source
/ getZdDetailList(data).then((res) => {
// if (res.result.length > 0) {
/ res.result.forEach(i => {
// if (i.children.length > 0) {
/ i.expand = false;
}
/ })
// self.$emit("ownerMethod", item, res.result);
/ }
/ }).catch((error) => {
/ });
0);
键点击事件
enMenu (e, item, list) {
onsole.log(item, '右键list');
his.$emit("changeTop", e.pageY);
s.$emit("changeLeft", e.pageX);
s.$emit("changeZdData", item);
$emit("changeVisible", false);
所有权类型
e.log(item.dm,'item.dm ');
dm == 'G' || item.dm == 'J' ||item.dm == 'Z'){
mit("changeCreateVisible", true);
(item.type) {
zd':
$emit("changeIsZD", true);
mit("changeVisible", true);
;
dz':
$emit("changeDzVisible", true);
;
'zrz':
$emit("changeIsZD", false);
s.$emit("changeVisible", true);
;
zdy':
$emit("changeLpbVisible", true);
ljz':
s.$emit("changeLpbVisible", true);
reak;
case 'gzw':
this.$emit("changeGzwVisible", true);
break;
fault:
reak;
键双击事件
ick (item, bsm) {
Timeout(this.time);
tore.state.newZdbsm = bsm;
tem.type) {
':
tore.state.zdbsm = item.bsm;
:
tore.state.zrzbsm = item.bsm;
;
'dz':
his.$store.state.dzbsm = item.bsm;
reak;
'gzw':
his.$store.state.gzwbsm = item.bsm;
reak;
fault:
reak;
m.type == 'zd' || item.type == 'dz' || item.type == 'zrz' || item.type == 'gzw') {
= {
2,
.bsm,
his.$route.query.auth ? this.$route.query.auth : '0,1,2'
.$route.query.workitemInstanceId) {
workitemInstanceId = this.$route.query.workitemInstanceId;
(this.$route.query.ywbsm) {
data.ywbsm = this.$route.query.ywbsm;
}
this.$router.push({
path: '/' + item.type,
query: data
});
}
},
closeMenu () {
this.$emit("changeVisible", false);
},
},
watch: {
visible (value) {
if (value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
},
},
};
</script>
<style lang="scss">
.content {
height: 100%;
width: 100%;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .active_color {
// color: #ffffff;
// }
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.no_icon {
width: 17px;
height: 17px;
}
.tree_item_box {
position: relative;
width: 100%;
cursor: pointer;
}
// .ofy_scroll{
// overflow-y: scroll;
// overflow-x: hidden;
// }
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
.layer_text {
flex: 1;
line-height: 40px;
}
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 279px;
height: 40px;
box-sizing: border-box;
padding-left: 20px;
}
.lpb_basic_banner {
padding-left: 42px;
}
.second_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
.basic_banner {
width: 100%;
}
}
.zxxNode {
width: 279px !important;
position: relative;
left: -80px;
text-indent: 80px;
}
.iszd {
.tree_item_box {
.zxxNode {
padding-left: 0;
left: 0;
}
}
}
.iszrz,
.isgzw {
left: 0px !important;
text-indent: 96px;
}
.isdz {
text-indent: 96px !important;
.iszrz {
left: 0 !important;
text-indent: 112px !important;
}
}
.third_layer {
position: relative;
width: calc(100% - 20px);
cursor: pointer;
padding-left: 20px;
}
.white_layer {
color: black !important;
}
.lpbTree-node {
position: absolute;
top: 1px;
left: 0;
}
// .second_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .third_layer::before {
// content: "";
// position: absolute;
// height: 1px;
// width: 16px;
// left: 8px;
// top: 8px;
// opacity: .5;
// background: url('../../assets/images/rowline1.png');
// background-position-y: center;
// }
// .linkLine_default::after {
// content: "";
// position: absolute;
// height: 100%;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_first::after {
// content: "";
// position: absolute;
// /* 为了触顶 */
// top: -16px;
// height: calc(100% + 16px);
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// // 上半截
// .linkLine_half_top::after {
// content: "";
// position: absolute;
// height: 23px;
// top: -14px;
// width: 1px;
// left: 7px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
// .linkLine_last::after {
// content: "";
// position: absolute;
// height: 9px;
// width: 1px;
// left: 7px;
// top: 0px;
// opacity: .5;
// background: url('../../assets/images/colline1.png');
// background-position-x: center;
// }
.reTree_default_icon {
// opacity: .5;
background-size: contain;
}
.reTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
// opacity: .5;
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
.qsztImg {
width: 16px;
margin-right: 6px;
// border-radius: 50%; height: 20px; width: 20px; display: inline-block;
}
.curNode {
>.basic_banner {
background: #E9F5FF;
box-shadow: inset 2px 0 0 0 #0C71FB;
color: #0C71FB;
}
}
.qsztFont {
text-align: center;
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 16px;
border: 1px solid;
border-radius: 8px;
}
.mr4 {
margin-right: 4px;
}
</style>
<template>
<div class="content column-start-center reTree_box"
:style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200' : '286') + 'px' }">
<div class="column-start-center basic_layer" :class="islpb ? 'white_layer' : ''" v-for="(item, index) in formatData"
:key="index">
<div class="row-flex-start basic_banner" :class="{
active_color: item.expand && item.children.length > 0,
}" @click="itemClick(item)">
<div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)"><i class="iconfont iconguoyou"></i>
{{ item.mc }}</div>
<div class="reTree_icon" :style="{
height: 10 + 'px',
width: 10 + 'px',
}" :class="{
reTree_default_icon: item.children.length === 0,
reTree_collapse_icon: !islpb && item.expand && item.children.length > 0,
reTree_expand_icon: !islpb && !item.expand && item.children.length > 0,
lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0,
lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0,
}"></div>
</div>
<lineItem v-if="item.expand && item.children.length > 0" v-on="$listeners" @ownerMethod="ownerMethod(arguments)"
@changeTop="changeTop" @changeZdData="changeZdData" @changeLeft="changeLeft" @changeVisible="changeVisible"
@changeLpbVisible="changeLpbVisible" @changeIsZD="changeIsZD" @changeCreateVisible="changeCreateVisible"
@changeDzVisible="changeDzVisible" @changeGzwVisible="changeGzwVisible" :list="item.children"
:visible="zrzVisible" :size="size" :islpb="islpb" :formatData="formatData"></lineItem>
</div>
<ul v-show="zrzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="postionToMap">定位</li>
<li @click="importGeo">导入图形</li>
<li>
导出图形
<ul class="contextmenu childUl">
<li @click="exportText">文本</li>
<li @click="exportCad">CAD</li>
<li @click="exportExcel">Excel</li>
<li @click="exportToShp">ESRI Shape</li>
</ul>
</li>
<li @click="drsx" :class="zdQszt == '0' ? '' : 'noEdit'">导入属性</li>
<li @click="dcsx">导出属性</li>
<li v-show="!isZD">导入楼盘</li>
<!-- <li>重叠分析</li> -->
<li v-show="isZD && (zdQszt == '1' || zdQszt == '2')" @click="openCreateDialog('dzw')">添加定着物</li>
<li v-show="isZD && (zdQszt != '1' && zdQszt != '2')" class="noEdit">添加定着物</li>
<li @click="deleteByBsm()">删除</li>
<li @click="deleteGeoByBsm()">删除图形</li>
</ul>
<ul v-show="dzVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog('zrz')">新建自然幢</li>
<li @click="deleteByBsm()">删除</li>
</ul>
<ul v-show="createVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="openCreateDialog">新建宗地</li>
</ul>
<!-- 构筑物删除 -->
<ul v-show="gzwVisible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="deleteByBsm">删除</li>
</ul>
<ul v-show="lpbvisible" :style="{ left: lpbleft + 'px', top: lpbtop + 'px' }" class="contextmenu">
<li v-show="zdData.type == 'zrz'" @click="openLpbDialog('ljz')">添加逻辑幢</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz'" @click="openLpbDialog('zdy')">添加幢单元</li>
<li v-show="zdData.type == 'zrz' || zdData.type == 'ljz' || zdData.type == 'zdy'" @click="openLpbDialog('ch')">
添加层户</li>
<li v-show="zdData.type == 'ljz'" @click="deleteLjz">删除</li>
<li v-show="zdData.type == 'zdy'" @click="deleteZdy">删除</li>
</ul>
<!--@close="closeImportDialog"-->
<el-dialog :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog"
:visible.sync="improtDialog" width="30%" @close="closeImportDialog">
<import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo"
@closeImportDialog="closeImportDialog"></import-geo>
</el-dialog>
<!-- 添加定着物弹框 -->
<el-dialog :close-on-click-modal="false" title="新建" :modal="false" :visible.sync="dialogVisible" width="48%">
<!-- <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> -->
</el-dialog>
<!-- <sxdr :sxdr-visible="sxdrVisible" @close="sxdrClose" :dylx="zdData.type" :bsm="zdData.bsm"></sxdr> -->
</div>
</template>
<script>
import lineItem from "./lineItem.vue";
// import { deleteZdInfoByBsm, exportShp, exportExcel, delJzdByBsm, delJzxByBsm } from "@api/zd";
// import Create from "../../views/panel/create/index";
import ImportGeo from './tx/importGeo'
port geoUtils from "@/components/lineTree/tx/js/geoUtils";
rt featureUpdate from "@/libs/map/featureUpdate";
ort { deleteLjz, deleteZdy } from "@api/lpcx.js"
exportTemJson from '@/api/json/exportTemplate.json'
mport sxdr from '@/components/sxdr/sxdr'
port default {
nheritAttrs: false,
ps: {
{
e: Array,
ault: () => {
turn[];
: {
e: Number,
ault: 16,
b: {
e: Boolean,
ault: false,
omponents: { lineItem, Create, ImportGeo, sxdr },
ixins: [geoUtils, featureUpdate],
a() {
rn {
rVisible: false,
electedDetail: { },
timer: { },
formatData: this.$store.state.treeData,
isible: false,
top: 0,
left: 0,
sZD: true,
ata: { },
rentClickZdGeo: "",
mprotDialog: false,
ialogVisible: false,
制自然幢右键菜单
Visible: false,
盘表
visible: false,
top: 0,
left: 0,
/控制新建宗地菜单
reateVisible: false,
幢
isible: false,
属状态
szt: null,
: "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]]",
ateZrz: false,
/构筑物
zwVisible: false
ch: {
(n, o) {
s.formatData = this.preDealData(n);
isible(value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
Visible(value) {
(value) {
cument.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
wVisible(value) {
f(value) {
document.body.addEventListener("click", this.closeMenu);
lse {
cument.body.removeEventListener("click", this.closeMenu);
}
zrzVisible(value) {
(value) {
ment.body.addEventListener("click", this.closeMenu);
lse {
document.body.removeEventListener("click", this.closeMenu);
reateVisible(value) {
(value) {
document.body.addEventListener("click", this.closeMenu);
} else {
document.body.removeEventListener("click", this.closeMenu);
}
}
ed() {
nextTick(() => {
eDealData(this.pd);
ndTreeItemById(["6b5af49d803f97baf06afb897de257f5"]);
{
.log(this.zdData, 'zdData')
ow.open(`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`)
`api/tx/excelGeo/export?bsm=${this.zdData.bsm}&type=${this.zdData.type}`
mIF = document.createElement("iframe");
src = url;
style.display = "none";
t.body.appendChild(elemIF)
{
his.zdQszt != '0') {
drVisible = true;
e() {
sxdrVisible = false;
ading() {
his.$emit("loading")
eleteLjz() {
console.log("删除逻辑幢")
console.log(this.zdData, "zdData")
deleteLjz(this.zdData.bsm).then(res => {
if (res.success) {
this.loading()
else {
dy() {
log("删除幢单元")
e.log(this.zdData, "zdData")
teZdy(this.zdData.bsm).then(res => {
f(res.success) {
this.loading()
}
,
变菜单数据
Visible(data) {
s.zrzVisible = data;
s.lpbvisible = false;
dzVisible = false;
wVisible = false;
ta(data) {
= data;
zt = data.qszt;
(data) {
p = data;
lpbtop = data;
angeLeft(data) {
this.left = data;
this.lpbleft = data;
},
changeIsZD(data) {
this.isZD = data;
},
changeLpbVisible(data) {
this.lpbvisible = data;
this.zrzVisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
changeCreateVisible(data) {
this.createVisible = true;
},
//多幢
changeDzVisible(data) {
this.dzVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.gzwVisible = false;
},
//构筑物
changeGzwVisible(data) {
this.gzwVisible = data;
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
},
//添加定着物
openCreateDialog(type) {
if (type == 'zrz') {
this.createZrz = true;
}
console.log(this.zdData, 'this.zdData');
this.dialogVisible = true;
this.$store.state.zdbsm = this.zdData.zdbsm;
if (this.zdData.type == 'dz') {
this.$store.state.dzbsm = this.zdData.bsm;
} else {
this.$store.state.dzbsm = '';
}
},
//关闭添加定着物弹框
closeDialog() {
this.dialogVisible = false;
this.createZrz = false;
},
preDealData(list) {
//楼盘表目录树没有expand属性
// if(list == null){
// return list
// }else{
list.forEach((x) => {
if (x.expand == undefined) this.$set(x, "expand", true);
if (x.children && x.children.length > 0) {
this.preDealData(x.children);
}
});
return list;
// }
},
// 根据id展开树的具体项
expandTreeItemById(idList) {
let _this = this;
function loopTree (list) {
list.forEach((x) => {
if (idList.includes(x.zdbsm)) {
_this.$set(x, "expand", true);
} else {
_this.$set(x, "expand", false);
}
if (x.children && x.children.length > 0) loopTree(x.children);
});
return list;
}
this.formatData = loopTree(this.pd);
console.log(this.formatData, "this.formatData");
},
itemClick(item) {
// item.expand = item.expand == undefined? true:!item.expand;
this.formatData.forEach(i => {
if (i.bsm != item.bsm) {
i.expand = false
} else {
// i.expand = !item.expand
}
})
item.expand = !item.expand;
// this.$emit("itemClick", item);
},
//给所有权类型添加子节点
ownerMethod(arr) {
let item = arr[0];
let list = arr[1]
this.formatData.forEach(i => {
if (i.bsm == item.xzq) {
i.children.forEach(j => {
if (j.bsm == item.djq) {
j.children.forEach(k => {
if (k.bsm == item.djzq) {
k.children.forEach(n => {
if (n.dm == item.dm) {
this.$nextTick(() => {
n.children = list;
})
}
})
}
})
}
})
}
});
this.$store.state.treeData = this.formatData;
},
//自然幢右键点击事件
openMenu(e, item) {
this.lpbleft = e.pageX;
this.lpbtop = e.pageY;
this.zdData = item;
this.changeLpbVisible(true);
},
//关闭右键菜单
closeMenu() {
this.zrzVisible = false;
this.lpbvisible = false;
this.dzVisible = false;
this.gzwVisible = false;
},
//楼盘表右键菜单项打开父组件弹框
openLpbDialog(type) {
this.$parent.openLpbDialog(this.zdData, type);
},
detailDoubleClick(data) {
clearTimeout(this.timer);
this.selectedDetail = data;
this.$emit("detailDoubleClick", data);
},
//右键菜单的删除
deleteByBsm() {
let name = '';
switch (this.zdData.type) {
case 'zd':
name = '宗地'
break;
case 'dz':
name = '多幢'
break;
case 'zrz':
name = '自然幢'
break;
case 'gzw':
name = '构筑物'
break;
default:
break;
}
this.$confirm('是否确定删除该' + name + '?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = { "bsm": this.zdData.bsm, "type": this.zdData.type };
deleteZdInfoByBsm(params)
.then((res) => {
console.log(res);
if (res.success) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.$router.push("/panel");
} else {
this.$message({
message: res.message,
type: "warning",
});
}
})
.catch((error) => { });
}).catch(() => {
});
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
self.delGraphic(featureUrl, features[0], null);
}
});
},
//删除图形
deleteGeoByBsm() {
var self = this;
var BSM = "";
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//删除图形相关信息
var type = this.zdData.type;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var layer = null;
if (type == 'zd') {
layer = self.getLayerByName("ZDJBXX");
} else {
layer = self.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
features[0].geometry = null;
self.updateGraphic(featureUrl, features, function (res) {
if (!res.updateFeatureResults[0].error) {
self.$message.warning("删除成功!!!")
//清除图层
self.clearHighlightLayer("testMap");
//self.addGeoByBsm(BSM,type,"testMap");
//删除界址点 界址线
if (type == 'zd') {
self.delJzdAndJzx(BSM);
}
}
});
} else {
self.$message.warning("暂无图形信息!!!")
}
});
},
//删除宗地界址点 界址线
delJzdAndJzx(bsm) {
delJzdByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址点成功!!!");
}
});
delJzxByBsm({ zdbsm: bsm }).then(res => {
if (res.success) {
console.log("删除界址线成功!!!");
}
})
},
/*
* 导入图形
* */
importGeo() {
var self = this;
var BSM = "";
if (this.zdData.qszt != '0') {
this.$message.warning("不是临时数据，不能导入图形!!!");
return;
}
var type = this.zdData.type;
if (type == "zd") {
BSM = this.zdData.zdbsm;
} else {
BSM = this.zdData.bsm;
}
//当确定导入图形是 跳转到图形界面
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0) {
if (features[0].geometry && features[0].geometry.rings.length > 0) {
self.$confirm('该条数据有地块信息，是否继续导入?', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.postionToMap();
self.improtDialog = true;
self.currentClickZdGeo = features[0];
}).catch(() => {
self.$message({
type: 'info',
message: '已取消'
});
});
} else {
self.postionToMap();
self.currentClickZdGeo = features[0];
self.improtDialog = true;
}
} else {
self.postionToMap();
self.currentClickZdGeo = null;
self.improtDialog = true;
}
});
},
//导出文本文件
exportText() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var textCotent = "";
textCotent += exportTemJson.exprotTextAttr;
textCotent += "[地块坐标]\n";
var dkMc = "", dkYt = "";
if (type == 'zd') {
dkMc = data.attributes.ZL;
dkYt = data.attributes.YT;
} else {
dkMc = data.attributes.XMMC + data.attributes.JZWMC;
dkYt = "建设用地";
}
textCotent += ",,," + dkMc + ",面,," + dkYt + ",,@\n";
for (var i = 0; i < jzdInfo.length; i++) {
textCotent += jzdInfo[i].jzdh + "," + jzdInfo[i].sxh + "," +
jzdInfo[i].x + "," + jzdInfo[i].y + "\n"
}
self.downloadTxt(textCotent, "outPut.txt");
}
}, { wkt: this.wkt });
},
//导出shp文件
exportToShp() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = JSON.stringify(features[0]);
window.location.href = "/api/tx/shpUtils/writeShp?strObj=" + encodeURI(data)
/* exportShp({
"strObj":encodeURI(data)
}).then(res => {
debugger
});*/
} else {
self.$message.warning("暂无空间信息!!!!");
}
}, { wkt: this.wkt });
},
//导出excel
exportExcel() {
var self = this;
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
this.queryGeoByBsm(BSM, type, function (features) {
if (features && features.length > 0 && features[0].geometry.rings.length > 0) {
var data = features[0];
var jzdInfo = self.craetJZPoint(data);
var submitData = [];
for (var i = 0; i < jzdInfo.length; i++) {
var obj = {
jzdHao: jzdInfo[i].jzdh,
x: jzdInfo[i].x,
y: jzdInfo[i].y,
diKuaiQuanHao: jzdInfo.sxh
}
submitData.push(obj);
}
exportExcel(submitData).then((res) => {
if (res.code == 200) {
var path = res.result;
window.location.href = "/api/tx/excelGeo/download?filePath=" + encodeURI(path);
}
});
} else {
self.$message.warning("还没有空间信息!!!!")
}
}, { wkt: this.wkt })
},
//导出CAD
exportCad() {
//TODO
},
downloadTxt(text, fileName) {
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
//图形定位
postionToMap() {
var type = this.zdData.type;
var BSM = type == 'zd' ? this.zdData.zdbsm : this.zdData.bsm;
if (this.$route.path == "/viewMap") {
//定位到当前空间位置
// TODO 这个方法只是为了支撑功能
this.postionToThisGeo(BSM, type);
return;
}
var curretRouterInfo = {
path: this.$route.path,
query: this.$route.query
}
sessionStorage.setItem("curretRouterInfo", JSON.stringify(curretRouterInfo));
this.$router.push({
path: "/viewMap",
query: {
bsm: BSM,
type: type
}
});
},
//关闭图形弹框
closeImportDialog() {
this.improtDialog = false;
this.clearOverLayer();
}
},
};
</script>
<style lang="scss" scoped>
.content {
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.column-start-center {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.row-flex-start {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reTree_icon {
width: 17px;
height: 17px;
margin-right: 16px;
}
.basic_layer {
width: 100%;
position: relative;
color: #4a4a4a;
cursor: pointer;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
.layer_text {
flex: 1;
}
}
.white_layer {
color: black !important;
}
.first_vertical_line {
content: "";
position: absolute;
width: 1px;
left: 6px;
top: 17px;
background: #c3c5c8;
}
.basic_banner {
position: relative;
width: 280px;
height: 40px;
}
.second_layer {
position: relative;
width: 100%;
cursor: pointer;
padding-left: 25px;
}
.second_layer::before {
content: "";
position: absolute;
height: 1px;
width: 16px;
left: 9px;
top: 9px;
background: #c3c5c8;
}
.linkLine_default::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.linkLine_first::after {
content: "";
position: absolute;
/* 为了触顶 */
top: -16px;
height: calc(100% + 16px);
width: 1px;
left: 9px;
background: #c3c5c8;
}
// 上半截
.linkLine_half_top::after {
content: "";
position: absolute;
height: 23px;
top: -14px;
width: 1px;
left: 9px;
background: #c3c5c8;
}
.linkLine_last::after {
content: "";
position: absolute;
height: 9px;
width: 1px;
left: 9px;
top: 0px;
background: #c3c5c8;
}
.reTree_collapse_icon {
background: url("../../assets/images/arrow-down-bold.svg") no-repeat center center;
background-size: contain;
}
.reTree_default_icon {
background: url("../../assets/images/reTree_default_.svg") no-repeat center center;
background-size: contain;
}
.reTree_expand_icon {
background: url("../../assets/images/arrow-left-bold.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_collapse_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_expand_.svg") no-repeat center center;
background-size: contain;
}
.lpbTree_expand_icon {
// opacity: .5;
background: url("../../assets/images/lpbTree_collapse_.svg") no-repeat center center;
background-size: contain;
}
.reTree_focus_icon {
background: url("../../assets/images/reTree_focus_.svg") no-repeat center center;
background-size: contain;
}
/* /deep/ .importDialog{
margin-top: 120px!important;
margin-left: 291px;
} */
</style>
<template>
<div>
<ul class="importDiv" v-if="!resultDialog && !txtResultDialog && !dealDialog">
<li>
<el-upload class="avatar-uploader" action="#" accept=".txt" :auto-upload="false" :show-file-list="false"
:on-change="txtFileChange">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">TXT文本格式</div>
<div class="templateDowload">
<a href="#" @click.stop="downloadFile('./fileTemplate/txttemplet.txt', 'txttemplet.txt')">TXT模板下载</a>
</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/shpUtils/readShp" accept=".zip" :show-file-list="false"
:on-success="shpFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">ESRI Shape文件格式</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" accept=".dwg,.dxf"
:show-file-list="false" :on-success="cadFileSuccess">
<!-- <el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">CAD文件</div>
</el-upload>
</li>
<li>
<el-upload class="avatar-uploader" action="/api/tx/excelGeo/readExcel" accept=".xls,.xlsx"
:show-file-list="false" :on-success="excelFileSuccess">
<!--<el-button size="small" type="primary">点击上传</el-button>-->
<i class="iconfont iconshangchuan"></i>
<div class="title">Excel文件格式</div>
<div class="templateDowload">
<a href="#"
@click.stop="downloadFile('./fileTemplate/exceltemplet.xlsx', 'exceltemplet.xlsx')">Excel模板下载</a>
</div>
</el-upload>
</li>
</ul>
<div v-if="resultDialog">
<el-form :model="zdForm" ref="zdCheckForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="宗地" prop="zdBsm" :rules="[
{ required: true, message: '请选择宗地', trigger: 'change' },
]">
<el-select v-model="zdForm.zdBsm" filterable placeholder="请选择" @change="zdChange">
<el-option v-for="item in resultData" :key="item.objectid" :label="item.XMMC" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('zdCheckForm')">导入</el-button>
<el-button @click="cancel('zdCheckForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="txtResultDialog">
<el-form :model="txtZd" ref="txtZdForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="地块名称" prop="name" :rules="[
{ required: true, message: '请选择地块', trigger: 'change' },
]">
<el-select v-model="txtZd.name" filterable placeholder="请选择" @change="txtChange">
<el-option v-for="(item, index) in txtResult" :key="index" :label="item.attributes.name"
:value="item.attributes.name">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitTxtForm('txtZdForm')">导入</el-button>
<el-button @click="cancelTxtForm('txtZdForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
<div v-if="dealDialog">
<el-form :model="dealForm" ref="dealForm" label-width="100px" size="small" @submit.native.prevent
class="demo-ruleForm">
<el-form-item label="处理方法" prop="method" :rules="[
{ required: true, message: '请选择', trigger: 'change' },
]">
<el-select v-model="dealForm.method" filterable placeholder="请选择">
<el-option v-for="(item, index) in dealMethods" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitDealForm('dealForm')">确定</el-button>
<el-button @click="cancelDealForm('dealForm')">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import geoUtils from "@components/lineTree/tx/js/geoUtils";
import featureUpdate from "@libs/map/featureUpdate";
// import { addjzd, addjzx } from "@/api/zd"
export default {
props: {
propertyInfo: {
type: Object,
default: null
},
geoInfo: {
type: Object,
default: null
},
timeLine: {
type: Number,
default: null
}
},
mixins: [geoUtils, featureUpdate],
data () {
return {
resultData: [],
resultDialog: false,
zdForm: {
zdBsm: ""
},
currentClickZd: null,
txtResult: [],
txtResultDialog: null,
txtZd: {
name: ""
},
overResults: [],//与导入宗地重叠的地块
currntDealGraphic: null,
dealMethods: [{
label: "不做处理",
value: "1"
}, {
label: "删除叠加部分",
value: "2"
}, {
label: "删除已重叠部分",
value: "3"
}, {
label: "删除原图形",
value: "4"
}],
dealDialog: false,
dealForm: {
method: ""
}
}
},
watch: {
timeLine (newValue, oldValue) {
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
}
},
methods: {
txtFileChange (file, fileList) {
var self = this;
var fileReader = new FileReader();
fileReader.readAsText(file.raw);
fileReader.onload = function (res) {
var content = this.result;
if (!content || content.length == 0) {
self.$message.warning("文件内容为空!!!");
return;
}
self.analysisTextFile(content);
}
},
analysisTextFile (content) {
var index = content.indexOf("[地块坐标]"),
geoInfos = content.substr(index),
geoList = geoInfos.split("\n");
if (geoList.length < 1) {
this.$message.warning("文本内容格式有误，请效验文本内容格式!!!");
return;
}
//this.$emit("closeImportDialog");
var features = [], attributes = {}, points = [], j = 1;
for (var i = 1; i < geoList.length; i++) {
var rowData = geoList[i];
if ((rowData.indexOf("J") != -1 && rowData.indexOf("J") == 0) || (rowData.indexOf("j") != -1 && rowData.indexOf("j") == 0)) {
//解析坐标点信息
var pointInfo = rowData.split(",");
var point = [parseFloat(pointInfo[2]), parseFloat(pointInfo[3])];
points.push(point);
} else {
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [points]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
var info = rowData.split(",");
if (info[3] || info[3] == 'null') {
attributes.name = '地块' + j;
j++
} else {
attributes.name = info[3];
}
}
}
if (points.length > 0) {
var graphic = {
attributes: JSON.parse(JSON.stringify(attributes)),
geometry: {
rings: [[points.concat()]]
}
}
features.push(graphic);
}
//新建一个信息 坐标名称 类型
attributes = {};
points = []
this.txtResult = features;
this.txtZd.name = "";
this.txtResultDialog = true;
},
shpFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
this.resultData = response.result;
this.resultDialog = true;
} else {
this.$message.warning(response.message);
}
},
cadFileSuccess (response, file, fileList) {
},
excelFileSuccess (response, file, fileList) {
var self = this;
if (response.success) {
var result = response.result;
var points = [];
for (var i = 0; i < result.length; i++) {
var point = [];
point[0] = parseFloat(result[i].x);
point[1] = parseFloat(result[i].y);
points.push(point);
}
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]]";
var geometry = {
rings: [points],
spatialReference: {
wkt: wkt
},
type: "polygon"
}
var graphic = {
attributes: null,
geometry: geometry
}
self.checkGeo(graphic);
} else {
this.$message.warning(response.message);
}
},
//文本文档导入
submitTxtForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
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]]";
var graphics = self.txtResult.filter(item => {
return item.attributes.name == self.txtZd.name;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
})
},
txtChange (value) {
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]]";
var graphics = this.txtResult.filter(item => {
return item.attributes.name == value;
})
var graphic = graphics[0];
graphic.geometry.type = "polygon";
graphic.geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(graphic.geometry, []);
},
//校验空间完整性
checkGeo (graphic) {
var self = this;
//校验完整性 直接调用空间方法 提交空间表
self.geoJoint(graphic.geometry, function (isJoint, message) {
if (isJoint) {
self.$message.warning(message)
return;
} else {
var type = self.propertyInfo.type;
if (type == 'zd') {
//重叠分析
self.zdOverAnalys(self.propertyInfo.zdbsm, graphic, function (flag, results) {
if (flag) {
self.$message.warning("导入的宗地与其他宗地有重叠，请处理！！");
self.dealOverData(results, graphic);
} else {
self.saveZd(graphic);
}
});
} else {
self.zrzOverAnalys(self.propertyInfo.bsm, graphic, function (flag, mes) {
if (flag) {
self.$message.warning(mes);
return;
} else {
self.saveZRZ(graphic);
}
});
}
}
});
},
//选择处理方式
submitDealForm (formName) {
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
//选择处理方式
var value = self.dealForm.method;
self.currntDealGraphic.attributes = {};
switch (value) {
case '1': self.currntDealGraphic.attributes.BGZT = 1; self.saveZd(self.currntDealGraphic); break;
case "2": self.getDifference(self.currntDealGraphic, self.overResults, self.delOverGeo); break;
case "3": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, true); break;
case "4": self.getResultsDif(self.overResults, self.currntDealGraphic, self.delOtherGeo, false); break;
}
} else {
console.log('error submit!!');
return false;
}
})
},
//裁剪自己在保存
delOverGeo (geometry) {
if (!this.currntDealGraphic.attributes) {
this.currntDealGraphic.attributes = {};
}
this.currntDealGraphic.attributes.BGZT = 2;
if (geometry == null) {
this.$message.warning("完全重叠，已删除图形信息!!!")
this.currntDealGraphic.geometry = geometry;
}
this.saveZd(this.currntDealGraphic);
},
//裁剪别的在保存
delOtherGeo (results) {
//执行编辑操作
var layer = this.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.updateGraphic(featureUrl, results);
this.saveZd(this.currntDealGraphic);
},
//下载文档模板
downloadFile (url, fileName) {
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
//导入
submitForm (formName) {
//校验完整性 直接调用空间方法 提交空间表
var self = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var geometry = self.parseWktToArc(self.currentClickZd.wkt);
geometry.type = "polygon";
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]]";
geometry.spatialReference = {
wkt: wkt
}
var graphic = {
attributes: self.currentClickZd,
geometry: geometry
}
self.checkGeo(graphic);
} else {
console.log('error submit!!');
return false;
}
});
},
dealOverData (results, graphic) {
this.overResults = results;
this.currntDealGraphic = graphic;
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = true;
},
saveZd (graphic) {
var self = this;
var points = null, lines = null,
layer = self.getLayerByName("ZDJBXX");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
//替换 生成图像 高亮
if (graphic.attributes && graphic.attributes.BGZT) {
self.geoInfo.attributes.BGZT = graphic.attributes.BGZT;
}
self.geoInfo.attributes.BSM = this.propertyInfo.zdbsm;
self.geoInfo.attributes.ZDDM = this.propertyInfo.zddm;
self.geoInfo.attributes.XMMC = this.propertyInfo.mc;
graphic.attributes = self.geoInfo.attributes;
self.updateGraphic(featureUrl, graphic, function (res) {
//保存成功之后生成界址点 界址线
//生成坐标点
//跳转至map界面updateResults
var updResult = res.updateFeatureResults[0];
if (updResult.objectId) {
var OBJECTID = updResult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
//生成图像 保存
var attributes = {
BSM: this.propertyInfo.zdbsm,
ZDDM: this.propertyInfo.zddm,
XMMC: this.propertyInfo.mc
};
if (graphic.attributes && graphic.attributes.BGZT) {
attributes.BGZT = graphic.attributes.BGZT;
}
graphic.attributes = attributes;
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
var OBJECTID = addRresult.objectId;
if (graphic.geometry) {
points = self.craetJZPoint(graphic);
self.savejzd(points)
//生成边框线
self.createJZLine(graphic, function (res) {
lines = res;
self.saveJzx(lines);
});
}
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
savejzd (points) {
var savePoints = []
for (var i = 0; i < points.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
jzdh: points[i].jzdh,
sxh: points[i].sxh,
xzbz: points[i].x,
yzbz: points[i].y,
jblx: "",
jzdlx: ""
}
savePoints.push(obj);
}
//保存矢量数据表
// addjzd(savePoints).then(res => {
// if (res.succcess) {
// console.log("界址点保存成成功！！！");
// }
// });
//保存空间数据
},
saveJzx (lines) {
var jzxLines = [];
for (var i = 0; i < lines.length; i++) {
var obj = {
glbsm: this.propertyInfo.zdbsm,
qsd: lines[i].startPoint,
zzd: lines[i].endPoint,
jzjj: lines[i].distance,
qdh: lines[i].qdh,
zdh: lines[i].zdh,
jzxlx: "",
jzxwz: "",
jxxz: "",
sm: ""
}
jzxLines.push(obj);
}
//保存矢量数据表
// addjzx(jzxLines).then(res => {
// if (res.success) {
// //触发查询界址线
// console.log("界址线保存成功!!!!!");
// }
// });
//保存空间数据表
},
saveZRZ (graphic) {
var self = this;
var layer = null;
layer = self.getLayerByName("ZRZ");
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
if (self.geoInfo) {
self.geoInfo.BSM = self.propertyInfo.bsm;
graphic.attributes = self.geoInfo.attributes;
//替换 生成图像 高亮
self.updateGraphic(featureUrl, graphic, function (res) {
var addRresult = res.updateFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
} else {
var attributes = {
BSM: this.propertyInfo.bsm,
XMMC: this.propertyInfo.xmmc
}
graphic.attributes = attributes;
//生成图像 保存
self.addGraphic(featureUrl, graphic, function (res) {
var addRresult = res.addFeatureResults[0];
if (addRresult.objectId) {
self.$message.success("保存成功!!!");
self.goMap();
}
});
}
},
//操作成功不需要跳转地图 (直接定位新导入的图形)
goMap () {
var bsm = "", type = this.propertyInfo.type;
if (type == "zd") {
bsm = this.propertyInfo.zdbsm;
} else {
bsm = this.propertyInfo.bsm;
}
this.resultDialog = false;
this.txtResultDialog = false;
this.dealDialog = false;
this.$emit("closeImportDialog");
//TODO 定位当前新导入的图形
this.addGeoByBsm(bsm, type, "testMap");
},
//取消
cancel () {
this.zdForm.zdBsm = "";
this.currentClickZd = null;
this.resultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//取消文本选择的弹出框
cancelTxtForm () {
this.txtZd.name = "";
this.txtResultDialog = false;
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//取消导入处理的结果
cancelDealForm () {
this.dealForm.method = "";
this.dealDialog = false;
this.overResults = [];
// 清空当前图层上显示的图形
this.clearOverLayer();
},
//宗地选择发生改变
zdChange (value) {
this.zdForm.zdBsm = value.XMMC;
this.currentClickZd = value;
var geometry = this.parseWktToArc(this.currentClickZd.wkt);
geometry.type = "polygon";
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]]";
geometry.spatialReference = {
wkt: wkt
}
this.addOverLayer(geometry, []);
}
}
}
</script>
<style scoped lang="scss">
.importDiv {
display: flex;
justify-content: center;
align-content: center;
li {
margin: 5px;
width: 50%;
.title {
line-height: 1;
margin-top: -57px;
font-size: 14px;
}
.templateDowload {
line-height: 1;
margin-top: 7px;
a {
color: #409eff;
}
}
}
}
/deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 100%;
height: 178px;
line-height: 178px;
}
/deep/ .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
/deep/ .iconfont {
font-size: 20px;
color: #8c939d;
width: 100%;
text-align: center;
}
</style>
\ No newline at end of file

export default {
methods:{
downloadTxt(text, fileName){
let element = document.createElement('a')
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
element.setAttribute('download', fileName)
element.style.display = 'none'
element.click()
},
createTextContent(jzdInfo){
var textContent = "";
for(var i = 0;i < jzdInfo.length;i++){
textContent += jzdInfo[i].jzdh +","+jzdInfo[i].sxh+"," +
jzdInfo[i].x+","+jzdInfo[i].y+"\n"
}
return textContent;
},
}
}
\ No newline at end of file
/*
* 图形相关的操作 js
* */
import layers from '@/api/json/layers.json'
import queryUtils from "@/utils/map/queryUtils";
import identifyUtils from '@/utils/map/IdentifyUtils'
import { loadModules } from "esri-loader"
import featureUpdate from "@/utils/map/featureUpdate";
import arcgisParser from 'terraformer-arcgis-parser'
import wktParse from 'terraformer-wkt-parser'
import { maps } from '@/utils/map/mapUtils'
import graphicSymbol from '@/api/json/graphicSymbol.json'
export default {
data () {
return {
}
},
methods: {
getLayerByName (name) {
for (var i = 0; i < layers.length; i++) {
if (layers[i].layerName == name) {
return layers[i];
}
}
return null;
},
queryGeoByBsm (bsm, type, callBackFunction, outSpatialReference) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, outSpatialReference, function (res) {
var features = res.features;
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
});
},
//生成介质点
craetJZPoint (graphic) {
var geomtry = graphic.geometry, rings = geomtry.rings[0];
var pointInfos = [];
this.getPointByRings(rings, pointInfos);
return pointInfos;
},
getPointByRings (rings, pointInfos) {
for (var i = 0; i < rings.length; i++) {
var children = rings[i];
if (children.length == 2 && typeof children[0] == 'number') {
var obj = {};
obj.jzdh = "j" + pointInfos.length;
obj.sxh = pointInfos.length;
obj.x = children[0];
obj.y = children[1];
pointInfos.push(obj);
} else {
this.getPointByRings(children, pointInfos);
}
}
},
//生成介质线
createJZLine (graphic, callBackFunction) {
var self = this;
loadModules([
"esri/geometry/support/geodesicUtils",
"esri/geometry/Point",
"esri/geometry/Polyline"
]).then(([
geodesicUtils,
Point,
Polyline
]) => {
//取得各个坐标点 然后生成外围坐标线
var geometry = graphic.geometry,
rings = geometry.rings,
points = [];
if (rings.length > 0) {
for (var i = 0; i < rings.length; i++) {
var danPoints = [];
self.getPointByRings(rings[i], danPoints);
points.push(danPoints);
}
} else {
var danPoints = [];
self.getPointByRings(rings, danPoints);
points.push(danPoints);
}
var lines = [];
//meters
for (var i = 0; i < points.length; i++) {
for (var j = 0; j < points[i].length; j++) {
if (j < (points[i].length - 1)) {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][j + 1].x, y: points[i][j + 1].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][j + 1].x + "," + points[i][j + 1].y,
qdh: points[i][j].sxh,
zdh: points[i][j + 1].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
} else {
const join = geodesicUtils.geodesicDistance(
new Point({ x: points[i][j].x, y: points[i][j].y }),
new Point({ x: points[i][0].x, y: points[i][0].y }),
"meters"
);
const { distance, azimuth } = join;
var obj = {
startPoint: points[i][j].x + "," + points[i][j].y,
endPoint: points[i][0].x + "," + points[i][0].y,
qdh: points[i][j].sxh,
zdh: points[i][0].sxh,
distance: distance,
jzxlx: "",
jzxwz: "",
jzxxz: "",
remark: ""
}
lines.push(obj);
}
}
}
if (callBackFunction && typeof callBackFunction == "function") {
callBackFunction(lines);
}
}).catch(err => {
throw (err);
})
},
//wkt转换成arcgis
parseWktToArc (wkt) {
var primitive = wktParse.parse(wkt);
/*if(primitive.type == "MultiPolygon"){
primitive.type = "Polygon"
}*/
return arcgisParser.convert(primitive)
},
postionToThisGeo (bsm, type) {
var view = maps["testMap"];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
var graphics = layer.graphics;
if (graphics.length > 0 && graphics.items[0].attributes.BSM == bsm) {
// view.extent = graphics.items[0].geometry.extent;
view.center = graphics.items[0].geometry.extent.center;
view.zoom = 15;
}
} else {
this.$message.success("暂无图形信息！！！");
}
},
//导入空间图形是 先判断数据是否跨界
geoJoint (geometry, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var djqLayer = null, djzqLayer = null, xjzqLayer = null;
djqLayer = self.getLayerByName("DJQ");
djzqLayer = self.getLayerByName("DJZQ");
xjzqLayer = self.getLayerByName("XJZQ");
var layerIds = [];
layerIds.push(djqLayer.id);
layerIds.push(djzqLayer.id);
layerIds.push(xjzqLayer.id);
var polygon = new Polygon(geometry);
identifyUtils.methods.identify(djqLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
var isJoint = false, layerName = "", message = "";
if (!results || results.length == 0) {
callBacFunction(true, "不在行政区内，请检查空间位置信息!!!");
}
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
var flag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && flag) {
isJoint = true;
layerName = results[i].layerName;
switch (layerName) {
case 'DJQ': message = "地块跨越地籍区，数据不合法!!!"; break;
case 'DJZQ': message = "地块跨越地籍子区，数据不合法!!!"; break;
case 'XJZQ': message = "地块跨越行政区，数据不合法!!!"; break;
}
break
}
}
if (callBacFunction && typeof callBacFunction == "function") {
callBacFunction(isJoint, message);
}
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
//保存或者编辑属性信息
updAttributes (bsm, type, attributes, callBackFunction, ydybsm) {
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else {
layer = this.getLayerByName("ZRZ");
}
var featureUrl = layer.layerUrl.replace("MapServer", "FeatureServer");
featureUrl += "/" + layer.id;
this.queryGeoByBsm(ydybsm ? ydybsm : bsm, type, function (features) {
if (features && features.length > 0) {
attributes.OBJECTID = features[0].attributes.OBJECTID;
features[0].attributes = attributes;
/* 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]]";
features[0].geometry.spatialReference = {
wkt:wkt
}*/
if (ydybsm) {
features[0].attributes.BSM = ydybsm;
}
featureUpdate.methods.updateGraphic(featureUrl, features[0], callBackFunction);
} else {
var graphic = {
attributes: attributes
}
featureUpdate.methods.addGraphic(featureUrl, graphic, callBackFunction);
}
});
},
//叠加分析 同一个图层的叠加分析
zdOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon"
]).then(([
Polygon
]) => {
var zdLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
var layerIds = [];
layerIds.push(zdLayer.id);
var polygon = new Polygon(graphic.geometry);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false;
if (results && results.length > 0) {
flag = true;
//加载在图层上 原本的要导入的数据 和重叠数据
self.addOverLayer(polygon, results);
}
callBacFunction(flag, results);
}, true)
}).catch(err => {
console.log(err);
throw (err);
})
},
//添加添加元素和覆盖的元素到地图上
addOverLayer (geometry, results) {
var view = maps["testMap"];
loadModules([
"esri/Graphic",
"esri/geometry/Polygon",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngineAsync",
"esri/geometry/Extent"
]).then(([
Graphic,
Polygon,
GraphicsLayer,
geometryEngineAsync,
Extent
]) => {
var graphic = new Graphic({
geometry: geometry
})
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "overLayer"
})
view.map.add(layer);
}
var impotSymbol = graphicSymbol.fillSymbol.importSymbol,
defaultSymbol = graphicSymbol.fillSymbol.defaultSymbol;
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature;
feature.symbol = defaultSymbol;
layer.add(feature);
var geo = geometryEngineAsync.intersect(feature.geometry, geometry);
geo.then(function (res) {
var interGra = new Graphic({
geometry: res,
symbol: graphicSymbol.fillSymbol.highlightSymbol
})
layer.add(interGra);
})
}
graphic.symbol = impotSymbol
layer.add(graphic);
var extent = new Extent(JSON.parse(JSON.stringify(graphic.geometry.extent)))
extent.spatialReference = view.spatialReference;
// view.extent = extent;
view.center = extent.center;
view.zoom = 15;
}).catch(err => {
console.log(err);
})
},
clearOverLayer () {
var view = maps["testMap"];
var layer = view.map.findLayerById("overLayer");
if (layer) {
layer.removeAll();
}
},
//自然幢叠加分析 不能跨宗地 图层本身的叠加分析
zrzOverAnalys (bsm, graphic, callBacFunction) {
var self = this;
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine"
]).then(([
Polygon,
geometryEngine
]) => {
var polygon = new Polygon(graphic.geometry);
var zdLayer = null,
zrzLayer = null;
zdLayer = self.getLayerByName("ZDJBXX");
zrzLayer = self.getLayerByName("ZRZ");
var layerIds = [];
layerIds.push(zdLayer.id);
layerIds.push(zrzLayer.id);
identifyUtils.methods.identify(zdLayer.layerUrl, layerIds, polygon, function (res) {
var results = res.results;
//判断数据是否与其他数据有重叠
var flag = false,
mesge = "";
if (results && results.length > 0) {
for (var i = 0; i < results.length; i++) {
var feature = results[i].feature,
layerName = results[i].layerName;
if (layerName == 'ZRZ') {
if (!feature.attributes['标识码'] || feature.attributes['标识码'] != bsm) {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
if (interFlag) {
flag = true;
mesge = "导入的自然幢与其他自然幢重叠，不能导入!!!";
break;
}
}
} else if (layerName == 'ZDJBXX') {
var interFlag = geometryEngine.intersects(polygon, feature.geometry);
var withinFlag = geometryEngine.within(polygon, feature.geometry);
if (!withinFlag && interFlag) {
flag = true;
mesge = "导入的自然幢与其跨宗地，不能导入!!!";
break;
}
}
}
}
callBacFunction(flag, mesge);
}, true)
}).catch(err => {
console.log(err);
})
},
//去除重叠部分
getDifference (inputGraphic, subGraphic, callBackFuncton) {
loadModules([
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/Graphic"
]).then(([
Polygon,
geometryEngine,
Graphic
]) => {
var inputGeometry = new Polygon(inputGraphic.geometry);
var outGeometry = null;
for (var i = 0; i < subGraphic.length; i++) {
var feature = subGraphic[i].feature;
outGeometry = geometryEngine.difference(inputGeometry, feature.geometry);
}
if (callBackFuncton && typeof callBackFuncton == 'function') {
callBackFuncton(outGeometry);
}
}).catch(err => {
console.log(err);
})
},
//业务处理 先用query方法 查询将所有属性查询 在做空间裁剪
getResultsDif (subGraphics, currntGraphic, callBackFunction, flag) {
var self = this;
loadModules([
"esri/geometry/geometryEngine",
"esri/geometry/Polygon"
]).then(([
geometryEngine,
Polygon
]) => {
var objectIds = [];
subGraphics.filter(item => {
objectIds.push(item.feature.attributes.OBJECTID);
})
var inputGeometry = new Polygon(currntGraphic.geometry);
var zdLayer = self.getLayerByName("ZDJBXX");
queryUtils.methods.queryByWhere(zdLayer.layerUrl + "/" + zdLayer.id, { OBJECTID: objectIds }, null, true, "", subGraphics[0].feature.geometry.spatialReference, function (result) {
var features = result.features;
if (flag) {
for (var i = 0; i < features.length; i++) {
features[i].geometry = geometryEngine.difference(features[i].geometry, inputGeometry);
features[i].attributes.BGZT = 3;
}
} else {
for (var i = 0; i < features.length; i++) {
features[i].geometry = null;
features[i].attributes.BGZT = 4;
}
}
if (callBackFunction && typeof callBackFunction == 'function') {
callBackFunction(features);
}
})
}).catch(err => {
console.log(err);
})
},
addGeoByBsm (bsm, type, viewId) {
var self = this;
var layer = null;
if (type == 'zd') {
layer = this.getLayerByName("ZDJBXX");
} else if (type == 'zrz') {
layer = this.getLayerByName("ZRZ");
} else {
console.log("未定义类型！！");
return;
}
if (!layer) {
console.log("没有找到图层，不能查询");
return;
}
queryUtils.methods.queryByWhere(layer.layerUrl + "/" + layer.id, { "BSM": bsm }, null, true, null, null, function (res) {
var features = res.features;
if (features && features.length > 0) {
if (!features[0].geometry || features[0].geometry.rings.length == 0) {
self.$message.success("暂无图形信息！！");
return;
}
loadModules([
"esri/layers/GraphicsLayer"
]).then(([
GraphicsLayer
]) => {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
} else {
layer = new GraphicsLayer({
id: "highlightLayer"
})
view.map.add(layer, 5);
}
var symbol = graphicSymbol.fillSymbol.highlightSymbol;
var graphic = features[0];
graphic.symbol = symbol;
layer.add(graphic);
// view.extent = graphic.geometry.extent;
view.center = graphic.geometry.extent.center;
view.zoom = 15;
}).catch(err => {
thow(err);
})
} else {
self.$message.success("暂无图形信息！！");
return;
}
});
},
//清空当前图层
clearHighlightLayer (viewId) {
var view = maps[viewId];
var layer = view.map.findLayerById("highlightLayer");
if (layer) {
layer.removeAll();
}
}
}
}
\ No newline at end of file
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:43
-->
<template>
<dialogBox title="新增法律法规" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
@closeDialog="closeDialog" v-model="value">
......@@ -25,72 +30,71 @@
</template>
<script>
import { addSysNotice } from "@/api/sysNotice.js"
import { upload } from "@/api/file.js"
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeType: '2'
import { addSysNotice } from "@/api/sysNotice.js"
import { upload } from "@/api/file.js"
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
ruleForm: {
noticeTitle: '',
noticeContent: '',
noticeFileUrl: '',
noticeType: '2'
},
rules: {
noticeTitle: [
{ required: true, message: '请输入法律法规标题', trigger: 'blur' }
]
},
}
},
methods: {
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message)
}
})
} else {
// console.log('error submit!!');
return false;
}
});
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
this.resetRuleForm();
},
rules: {
noticeTitle: [
{ required: true, message: '请输入法律法规标题', trigger: 'blur' }
]
//
resetRuleForm () {
this.$refs['ruleForm'].resetFields();
this.ruleForm.noticeType = '2'
},
beforeUpload (file) {
return true;
},
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message
})
},
}
},
methods: {
submitForm () {
let that = this;
that.$refs.ruleForm.validate(valid => {
if (valid) {
addSysNotice(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.resetRuleForm();
this.$parent.queryClick();
} else {
this.$message.error(res.message)
}
})
} else {
// console.log('error submit!!');
return false;
}
});
},
//关闭窗口
closeDialog () {
this.$emit("input", false);
this.resetRuleForm();
},
//
resetRuleForm () {
this.$refs['ruleForm'].resetFields();
this.ruleForm.noticeType = '2'
},
beforeUpload (file) {
return true;
},
async handleChange (file) {
var formdata = new FormData();
formdata.append("file", file.raw);
upload(formdata).then(res => {
this.ruleForm.noticeFileUrl = res.message
})
},
}
}
</script>
<style scoped lang="scss">
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:47
-->
<template>
<div class="from-clues">
<!-- 表单部分 -->
......@@ -11,7 +16,7 @@
</el-col>
<el-col :span="19" class="btnColRight">
<el-form-item>
<el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button>
<el-button type="primary" native-type="submit" @click="handleSearch">查询1</el-button>
<el-button type="primary" @click="openDialog()">新增</el-button>
</el-form-item>
</el-col>
......@@ -29,79 +34,79 @@
</div>
</template>
<script>
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./flfgdata";
import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js"
import addDialog from "./components/addDialog.vue";
export default {
name: "flfg",
components: { addDialog },
mixins: [table],
mounted () {
sendThis(this);
this.queryClick()
},
data () {
return {
isDialog: false,
viewDialog: false,
ruleForm: {
noticeTitle: ''
},
tableData: {
total: 0,
columns: datas.columns(),
data: [],
},
isDiglog: false
}
},
methods: {
// 列表渲染接口
queryClick () {
this.$startLoading()
getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
if (res.code === 200) {
this.$endLoading()
let { total, records } = res.result
this.tableData.total = total;
this.tableData.data = records
}
})
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./flfgdata";
import { getSysPolicyList, deleteSysNotice } from "@/api/sysNotice.js"
import addDialog from "./components/addDialog.vue";
export default {
name: "flfg",
components: { addDialog },
mixins: [table],
mounted () {
sendThis(this);
this.queryClick()
},
//打开新增弹窗
openDialog () {
this.isDialog = true;
data () {
return {
isDialog: false,
viewDialog: false,
ruleForm: {
noticeTitle: ''
},
tableData: {
total: 0,
columns: datas.columns(),
data: [],
},
isDiglog: false
}
},
downloadFile (item) {
const href = item.noticeFileUrl
window.open(href, '_blank');
},
//删除
delNotice (item) {
this.$confirm('是否确定删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
if (res.code == 200) {
this.$message.success('删除成功')
this.queryClick();
} else {
this.$message.error(res.message)
methods: {
// 列表渲染接口
queryClick () {
this.$startLoading()
getSysPolicyList({ ...this.ruleForm, ...this.pageData }, { 'target': '#flfgLoading' }).then(res => {
if (res.code === 200) {
this.$endLoading()
let { total, records } = res.result
this.tableData.total = total;
this.tableData.data = records
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
},
//打开新增弹窗
openDialog () {
this.isDialog = true;
},
downloadFile (item) {
const href = item.noticeFileUrl
window.open(href, '_blank');
},
//删除
delNotice (item) {
this.$confirm('是否确定删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteSysNotice({ "bsmNotice": item.bsmNotice }).then(res => {
if (res.code == 200) {
this.$message.success('删除成功')
this.queryClick();
} else {
this.$message.error(res.message)
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
});
},
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "~@/styles/public.scss";
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:58
-->
<template>
<div>
<div class="qtjfjmb-edit-title">
......@@ -117,140 +122,140 @@
</template>
<script>
import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
mounted () {
if (this.formData.bsmMb) {
this.$startLoading()
getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
this.$endLoading()
let { result } = res
this.ruleForm = result ? result : {}
})
}
},
data () {
return {
n: 0,
ruleForm: {
qllx: '',
qllxmc: '',
bdcqzlx: '',
dymbbs: '',
qlqtzk: '',
firstreg: '',
},
options: [
{
value: '1',
label: '不动产权证书'
import { updateSysSqywmbsz, getSysSqywmbszDetailById } from '@/api/sysSqywmbsz'
export default {
props: {
formData: {
type: Object,
default: () => { }
}
},
mounted () {
if (this.formData.bsmMb) {
this.$startLoading()
getSysSqywmbszDetailById(this.formData.bsmMb).then(res => {
this.$endLoading()
let { result } = res
this.ruleForm = result ? result : {}
})
}
},
data () {
return {
n: 0,
ruleForm: {
qllx: '',
qllxmc: '',
bdcqzlx: '',
dymbbs: '',
qlqtzk: '',
firstreg: '',
},
{
value: '2',
label: '不动产登记证明'
}
],
options1: [],
rules: {
qllx: [
{ required: true, message: '请输入权利类型编码', trigger: 'blur' }
options: [
{
value: '1',
label: '不动产权证书'
},
{
value: '2',
label: '不动产登记证明'
}
],
qllxmc: [
{ required: true, message: '请输入权利类型名称', trigger: 'blur' }
],
bdcqzlx: [
{ required: true, message: '请选择不动产权类型', trigger: 'change' }
],
dymbbs: [
{ required: true, message: '请输入打印模板', trigger: 'blur' }
],
qlqtztmb: [
{ required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
],
},
titleList: [
{
name: '首次登记'
options1: [],
rules: {
qllx: [
{ required: true, message: '请输入权利类型编码', trigger: 'blur' }
],
qllxmc: [
{ required: true, message: '请输入权利类型名称', trigger: 'blur' }
],
bdcqzlx: [
{ required: true, message: '请选择不动产权类型', trigger: 'change' }
],
dymbbs: [
{ required: true, message: '请输入打印模板', trigger: 'blur' }
],
qlqtztmb: [
{ required: true, message: '请输入权利其他状况模板', trigger: 'blur' }
],
},
{
name: '转移登记'
},
{
name: '变更登记'
},
{
name: '注销登记'
},
{
name: '更正登记'
},
{
name: '补证登记'
},
{
name: '换证登记'
}
]
}
},
methods: {
handleSelect (index) {
this.n = index
titleList: [
{
name: '首次登记'
},
{
name: '转移登记'
},
{
name: '变更登记'
},
{
name: '注销登记'
},
{
name: '更正登记'
},
{
name: '补证登记'
},
{
name: '换证登记'
}
]
}
},
submitForm () {
let that = this
updateSysSqywmbsz(this.ruleForm).then(res => {
if (res.code === 200) {
this.$popupCacel()
that.$message({
message: '修改成功',
type: 'success'
})
}
})
methods: {
handleSelect (index) {
this.n = index
},
submitForm () {
let that = this
updateSysSqywmbsz(this.ruleForm).then(res => {
if (res.code === 200) {
this.$popupCacel()
that.$message({
message: '修改成功',
type: 'success'
})
}
})
}
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
.qtjfjmb-edit-title {
padding-bottom: 10px;
border-bottom: 1px solid $borderColor;
margin-bottom: 10px;
}
.qtjfjmb-edit-title {
padding-bottom: 10px;
border-bottom: 1px solid $borderColor;
margin-bottom: 10px;
}
ul {
@include flex;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
ul {
@include flex;
border-radius: 5px;
overflow: hidden;
margin-bottom: 20px;
.active {
background: $light-blue;
color: #fff;
}
.active {
background: $light-blue;
color: #fff;
}
li {
flex: 1;
line-height: 36px;
@include flex-center;
border: 1px solid $borderColor;
margin-left: -1px;
cursor: pointer;
transition: all 0.3s;
li {
flex: 1;
line-height: 36px;
@include flex-center;
border: 1px solid $borderColor;
margin-left: -1px;
cursor: pointer;
transition: all 0.3s;
&:hover {
@extend .active;
&:hover {
@extend .active;
}
}
}
}
</style>
......
<!--
* @Description: 功能：流程图
* @Description: 流程图
* @Autor: renchao
* @LastEditTime: 2023-05-17 10:40:57
* @LastEditTime: 2023-07-19 16:04:34
-->
<template>
<div class='flowChart'>
......
......@@ -3,9 +3,7 @@ const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
const port = process.env.port || process.env.npm_config_port || 8888 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
......