<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/lpb" 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>