From 24c0a1a06065701c10fc5ce7a2d07b0692619fd4 Mon Sep 17 00:00:00 2001 From: tx <2622874537@qq.com> Date: Sat, 31 Aug 2024 18:04:08 +0800 Subject: [PATCH] =?UTF-8?q?=E5=81=9C=E8=BD=A6=E5=8C=BA=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/system/area/areaRange.vue | 718 +++++++++++++++------------- 1 file changed, 395 insertions(+), 323 deletions(-) diff --git a/src/views/system/area/areaRange.vue b/src/views/system/area/areaRange.vue index 2f31f92..eb82b74 100644 --- a/src/views/system/area/areaRange.vue +++ b/src/views/system/area/areaRange.vue @@ -1,276 +1,303 @@ @@ -380,6 +407,7 @@ export default { highlightedId: null, // 默认不高亮 showtable: true, currentRow: null, + ischange: false, // 表单校验 rules: { parkingName: [ @@ -422,51 +450,51 @@ export default { this.form = response.data; this.areaLon = response.data.longitude; this.areaLat = response.data.latitude; - }); this.getArea(this.areaId); setTimeout(() => { this.map.getAllOverlays("polygon").forEach((polygon) => { - // 根据 polygon 的 id 或其他属性判断是否为需要移除的对象 - if ( - polygon.getExtData() && - polygon.getExtData().parkingId === row.parkingId - ) { - // 移除该 polygon - this.map.remove(polygon); - } - }); - this.initEditor(row.boundaryStr); - this.map.setCenter([row.longitude, row.latitude]); - this.map.setZoom(17); // 这里的 15 是缩放级别，可以根据需要调整 - document.documentElement.scrollTop = 0 + // 根据 polygon 的 id 或其他属性判断是否为需要移除的对象 + if ( + polygon.getExtData() && + polygon.getExtData().parkingId === row.parkingId + ) { + // 移除该 polygon + this.map.remove(polygon); + } + }); + this.initEditor(row.boundaryStr); + this.map.setCenter([row.longitude, row.latitude]); + this.map.setZoom(17); // 这里的 15 是缩放级别，可以根据需要调整 + document.documentElement.scrollTop = 0; }, 300); console.log(row, "changeRangechangeRangechangeRange"); - }, - sub(){ - updateParking(this.form).then(response => { - this.$modal.msgSuccess("修改成功"); - // this.open = false; - this.getList(); - }); + sub() { + updateParking(this.form).then((response) => { + this.$modal.msgSuccess("修改成功"); + // this.open = false; + this.getArea(this.areaId); + }); }, - /** 提交按钮 */ - submitForm() { + /** 提交按钮 */ + submitForm() { this.form.areaId = this.defaultAreaId; - this.$refs["form"].validate(valid => { + this.$refs["form"].validate((valid) => { if (valid) { if (this.form.parkingId != null) { - updateParking(this.form).then(response => { + updateParking(this.form).then((response) => { this.$modal.msgSuccess("修改成功"); this.open = false; - this.getList(); + this.getArea(this.areaId); }); } else { - addParking(this.form).then(response => { + this.form.latitude = this.lat; + this.form.longitude = this.lon; + addParking(this.form).then((response) => { this.$modal.msgSuccess("新增成功"); this.open = false; - this.getList(); + this.getArea(this.areaId); }); } } @@ -544,6 +572,7 @@ export default { // this.initEditor(); }, initEditor(pathList) { + this.ischange = true; var path1 = []; path1 = JSON.parse(pathList) || []; @@ -605,6 +634,8 @@ export default { }, getArea(areaId) { + this.markers = []; + this.labels = []; getArea(areaId).then((response) => { this.queryParams.areaId = response.data.areaId; this.areaId = response.data.areaId; @@ -769,20 +800,15 @@ export default { }, clearPolygon() { this.status = false; - if (polyEditor) { - polyEditor.close(); // 关闭多边形编辑器 - } - - // 移除地图上的所有多边形对象 - this.map.getAllOverlays("polygon").forEach((polygon) => { - this.map.remove(polygon); + const polygons = polyEditor.getPolygons(); // 获取当前编辑的多边形 + console.log(polygons, "polygonspolygons"); + polygons.forEach((polygon) => { + this.map.remove(polygon); // 只移除当前编辑的多边形 }); + polyEditor.close(); // 关闭多边形编辑器 - // 如果需要，也可以清空与多边形相关的其他状态或数据 + // 清空与多边形相关的状态或数据 this.coordList = ""; - this.$emit("mapList", ""); - - this.$emit("center", ""); }, changeMapStyle() { // 创建一个默认的图层组件 @@ -930,12 +956,39 @@ export default { this.map.add(polygon); }, highlightRow(parkingId) { - this.$set(this, "highlightedId", parkingId); - // this.showtable = false; - // this.$refs.myTable.setCurrentRow(this.parkingList[6]); - this.$nextTick(() => { - this.scrollToRow(6); - }); + if ((this.ischange = false)) { + this.$set(this, "highlightedId", parkingId); + + this.$nextTick(() => { + this.scrollToRow(6); + }); + + this.$confirm("请选择要进行的操作", "提示", { + confirmButtonText: "修改范围", + cancelButtonText: "修改停车区内容", + closeOnClickModal: false, + closeOnPressEscape: false, + type: "warning", + distinguishCancelAndClose: true, + }) + .then(() => { + // 用户点击了“修改范围” + this.changeRange( + this.parkingList.find((item) => item.parkingId === parkingId) + ); + }) + .catch((action) => { + if (action === "cancel") { + // 用户点击了“修改停车区内容” + this.handleUpdate( + this.parkingList.find((item) => item.parkingId === parkingId) + ); + } else { + // 用户点击了“取消” + // 可以在这里添加其他逻辑，例如不进行任何操作 + } + }); + } }, handleCurrentChange(val) { this.currentRow = val; @@ -1011,9 +1064,9 @@ export default { addNoriding(data, title, lon, lat, parkingId) { let polygon = new AMap.Polygon({ path: data, - fillColor: "#ccebc5", - strokeOpacity: 1, - fillOpacity: 0.5, + fillColor: "#fff9e6", // 更淡的黄色 + strokeOpacity: 0.1, + fillOpacity: 0.1, // 增加透明度 strokeColor: "#ffcc00", strokeWeight: 2, strokeStyle: "solid", @@ -1046,7 +1099,7 @@ export default { }, editClose: function () { // console.log("this", this); - + this.ischange = false; let that = this; polyEditor.on("end", function (event) { // event.target 即为编辑后的多边形对象 @@ -1062,13 +1115,15 @@ export default { console.log(mapList, "mapListmapList"); // this.newmapList=mapList let mapListJson = JSON.stringify(mapList); - console.log("mapListJson:"+mapListJson); - this.form.boundaryStr = mapListJson; - let centerArr = center.toString().split(","); - this.form.longitude = centerArr[0]; - this.form.latitude = centerArr[1]; + console.log("mapListJson:" + mapListJson); + // console.log(this.form.boundaryStr,'this.form.boundaryStrthis.form.boundaryStr'); + that.form.boundaryStr = mapListJson; + let centerArr = center.toString().split(","); + that.form.longitude = centerArr[0]; + that.form.latitude = centerArr[1]; }); polyEditor.close(); + this.sub(); }, }, beforeDestroy() { @@ -1078,30 +1133,32 @@ export default {