diff --git a/src/views/system/area/areaRange.vue b/src/views/system/area/areaRange.vue index 44672c2..b799d64 100644 --- a/src/views/system/area/areaRange.vue +++ b/src/views/system/area/areaRange.vue @@ -1,208 +1,303 @@ @@ -312,6 +407,8 @@ export default { highlightedId: null, // 默认不高亮 showtable: true, currentRow: null, + ischange: false, + currentPolygon: null, // 表单校验 rules: { parkingName: [ @@ -347,9 +444,285 @@ export default { this.getAreaList(); }, methods: { + changeRange(row) { + this.reset(); + const parkingId = row.parkingId || this.ids; + getParking(parkingId).then((response) => { + 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; + }, 300); + console.log(row, "changeRangechangeRangechangeRange"); + }, + sub() { + updateParking(this.form).then((response) => { + this.$modal.msgSuccess("修改成功"); + // this.open = false; + this.getArea(this.areaId); + }); + }, + /** 提交按钮 */ + submitForm() { + this.form.areaId = this.defaultAreaId; + this.$refs["form"].validate((valid) => { + if (valid) { + if (this.form.parkingId != null) { + updateParking(this.form).then((response) => { + this.$modal.msgSuccess("修改成功"); + this.open = false; + this.getArea(this.areaId); + }); + } else { + this.form.latitude = this.lat; + this.form.longitude = this.lon; + addParking(this.form).then((response) => { + this.$modal.msgSuccess("新增成功"); + this.open = false; + this.getArea(this.areaId); + }); + } + } + }); + }, + async echart() { + clearInterval(this.timer); + console.log("接收参数", this.pathList); + console.log("接收参数", this.lon); + console.log("接收参数", this.lat); + this.lon2 = this.lon === null ? 120.35218 : this.lon; + this.lat2 = this.lat === null ? 26.944335 : this.lat; + // console.log(typeof JSON.parse(this.pathList)); + await AMapLoader.load({ + key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填 + version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 + plugins: [ + "AMap.ToolBar", + "AMap.Driving", + "AMap.PolygonEditor", + "AMap.PlaceSearch", + ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 + }) + .then((AMap) => { + this.map = new AMap.Map("container", { + //设置地图容器id + viewMode: "3D", //是否为3D地图模式 + zoom: this.zoom ? this.zoom : 13, //初始化地图级别 + center: [this.lon2, this.lat2], // 初始化地图中心点位置 + }); + + this.parkingList.forEach((parking) => { + this.addParking( + JSON.parse(parking.boundaryStr) || [], + parking.parkingName, + parking.longitude, + parking.latitude + ); + this.addMarker2( + parking, + "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", + parking.parkingName, + "#1890ff" + ); + }); + + this.noParkingList.forEach((noparking) => { + this.addNoParking(JSON.parse(noparking.boundaryStr) || []); + this.addMarker2( + noparking, + "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", + noparking.parkingName, + "#ff4444" + ); + }); + + this.noridingList.forEach((noriding) => { + this.addNoriding( + JSON.parse(noriding.boundaryStr) || [], + noriding.parkingName, + noriding.longitude, + noriding.latitude + ); + this.addMarker2( + noriding, + "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", + noriding.parkingName, + "#ffcc00" + ); + }); + }) + .catch((e) => { + console.log(e); + }); + // this.initEditor(); + }, + initEditor(pathList) { + console.log('创建了'); + this.ischange = true; + if(pathList==''){ + pathList=null + } + // 检查 pathList 是否为空或无效 + var path1; + try { + path1 = JSON.parse(pathList) || []; + } catch (e) { + console.error("Invalid JSON format in pathList:", e); + path1 = []; // 如果 JSON 解析失败，则将 path1 设为一个空数组 + } + + // 创建并保存当前编辑的多边形引用 + this.currentPolygon = new AMap.Polygon({ + path: path1, + fillColor: "#f0e68c", // 设置颜色 + fillOpacity: 0.3, // 设置透明度 + strokeColor: "#ffcc00", + strokeWeight: 2, + strokeStyle: "solid", + }); + this.map.add([this.currentPolygon]); + + polyEditor = new AMap.PolygonEditor(this.map); + polyEditor.setTarget(this.currentPolygon); // 设置当前多边形为编辑目标 + + // 为多边形和多边形编辑器添加事件监听 + polyEditor.on("add", (data) => { + this.coordList = data.lnglat; + var polygon = data.target; + + polygon.on("dblclick", () => { + polyEditor.setTarget(polygon); + polyEditor.open(); + }); + + // 保存当前编辑的多边形引用 + this.currentPolygon = polygon; + }); + + this.currentPolygon.on("dblclick", () => { + polyEditor.setTarget(this.currentPolygon); + polyEditor.open(); + }); + + return polyEditor; +}, +clearPolygon() { + this.status = false; + + if (this.currentPolygon) { + this.map.remove(this.currentPolygon); // 只移除当前编辑的多边形 + this.currentPolygon = null; // 清除引用 + } + + if (polyEditor) { + polyEditor.close(); // 关闭多边形编辑器 + polyEditor.setTarget(null); // 清除编辑器中的多边形引用 + polyEditor.off("add"); // 移除所有事件监听器 + polyEditor.off("end"); // 确保不再触发旧事件 + } + + // 清空与多边形相关的状态或数据 + this.coordList = []; + this.form.boundaryStr = ""; + // this.form.longitude = ''; + // this.form.latitude = ''; +}, +createPolygon() { + this.status = true; + + if (!polyEditor) { + polyEditor = new AMap.PolygonEditor(this.map); // 确保 polyEditor 被正确实例化 + } + + polyEditor.close(); // 关闭当前的编辑器 + polyEditor.setTarget(); // 清除当前目标 + polyEditor.open(); // 打开新的多边形编辑器 +}, + editClose: function () { + // console.log("this", this); + this.ischange = false; + let that = this; + polyEditor.on("end", function (event) { + // event.target 即为编辑后的多边形对象 + //多边形的坐标 + this.coordList = event.target.getPath(); + // console.log("coordList", this.coordList); + let mapList = []; + this.coordList.forEach((v) => { + // console.log("v", v.lng, "--", v.lat); + mapList.push([v.lng, v.lat]); + }); + let center = calculateCenter(mapList); + console.log(mapList, "mapListmapList"); + // this.newmapList=mapList + let mapListJson = JSON.stringify(mapList); + 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(); + }, + scrollToRow(rowIndex) { + // 获取表格的DOM元素 + this.$nextTick(() => { + // 获取表格的body wrapper元素 + const tableBodyWrapper = this.$refs.tableRef.$el.querySelector( + ".el-table__body-wrapper" + ); + + // 设置overflow为auto或scroll + if (tableBodyWrapper) { + tableBodyWrapper.style.overflow = "auto"; // 或者 'scroll' + } + + // 获取所有行 + const rows = tableBodyWrapper.querySelectorAll(".el-table__row"); + const row = rows[rowIndex]; + + if (row) { + // 计算滚动位置 + const scrollTop = + row.offsetTop - + tableBodyWrapper.offsetHeight / 2 + + row.clientHeight / 2; + // 滚动到指定位置 + tableBodyWrapper.scrollTo({ + top: scrollTop, + behavior: "smooth", + }); + } else { + console.warn(`Row at index ${rowIndex} not found.`); + } + }); + }, + getArea(areaId) { + this.markers = []; + this.labels = []; + this.parkingList=[] + this.noParkingList=[] + this.noridingList=[] getArea(areaId).then((response) => { - this.queryParams.areaId = response.data.areaId; this.areaId = response.data.areaId; this.lon = response.data.longitude; @@ -511,23 +884,7 @@ export default { element.style.visibility = this.show ? "hidden" : "visible"; }); }, - clearPolygon() { - this.status = false; - if (polyEditor) { - polyEditor.close(); // 关闭多边形编辑器 - } - // 移除地图上的所有多边形对象 - this.map.getAllOverlays("polygon").forEach((polygon) => { - this.map.remove(polygon); - }); - - // 如果需要，也可以清空与多边形相关的其他状态或数据 - this.coordList = ""; - this.$emit("mapList", ""); - - this.$emit("center", ""); - }, changeMapStyle() { // 创建一个默认的图层组件 let defaultLayer = new AMap.TileLayer(); @@ -550,80 +907,9 @@ export default { this.type = "default"; } }, - start() { - this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号; - }, - async echart() { - clearInterval(this.timer); - console.log("接收参数", this.pathList); - console.log("接收参数", this.lon); - console.log("接收参数", this.lat); - this.lon2 = this.lon === null ? 120.35218 : this.lon; - this.lat2 = this.lat === null ? 26.944335 : this.lat; - // console.log(typeof JSON.parse(this.pathList)); - await AMapLoader.load({ - key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填 - version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 - plugins: [ - "AMap.ToolBar", - "AMap.Driving", - "AMap.PolygonEditor", - "AMap.PlaceSearch", - ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 - }) - .then((AMap) => { - this.map = new AMap.Map("container", { - //设置地图容器id - viewMode: "3D", //是否为3D地图模式 - zoom: this.zoom ? this.zoom : 13, //初始化地图级别 - center: [this.lon2, this.lat2], // 初始化地图中心点位置 - }); - - this.parkingList.forEach((parking) => { - this.addParking( - JSON.parse(parking.boundaryStr) || [], - parking.parkingName, - parking.longitude, - parking.latitude - ); - this.addMarker2( - parking, - "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", - parking.parkingName, - "#1890ff" - ); - }); - - this.noParkingList.forEach((noparking) => { - this.addNoParking(JSON.parse(noparking.boundaryStr) || []); - this.addMarker2( - noparking, - "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", - noparking.parkingName, - "#ff4444" - ); - }); - - this.noridingList.forEach((noriding) => { - this.addNoriding( - JSON.parse(noriding.boundaryStr) || [], - noriding.parkingName, - noriding.longitude, - noriding.latitude - ); - this.addMarker2( - noriding, - "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", - noriding.parkingName, - "#ffcc00" - ); - }); - }) - .catch((e) => { - console.log(e); - }); - this.initEditor(); - }, + // start() { + // this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号; + // }, initAMap() { AMapLoader.load({ key: globalConfig.aMap.key, @@ -653,13 +939,29 @@ export default { // }); this.addArea(JSON.parse(this.areaList) || []); this.parkingList.forEach((parking) => { + let boundary = []; + + // 检查 boundaryStr 是否为有效的 JSON 字符串 + if (parking.boundaryStr) { + try { + boundary = JSON.parse(parking.boundaryStr); + } catch (e) { + console.error( + "Invalid JSON in boundaryStr:", + parking.boundaryStr + ); + boundary = []; // 如果解析失败，使用空数组 + } + } + this.addParking( - JSON.parse(parking.boundaryStr) || [], + boundary, parking.parkingName, parking.longitude, parking.latitude, parking.parkingId ); + this.addMarker2( parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", @@ -667,9 +969,20 @@ export default { "#1890ff" ); }); - this.noParkingList.forEach((noparking) => { - this.addNoParking(JSON.parse(noparking.boundaryStr) || [], noparking.parkingId); + let boundaryStr = noparking.boundaryStr; + let parsedBoundary = []; + + // 如果 boundaryStr 不是空字符串且是有效的 JSON 字符串，则解析 + if (boundaryStr && boundaryStr.trim() !== "") { + try { + parsedBoundary = JSON.parse(boundaryStr); + } catch (error) { + console.error("Error parsing noParking boundaryStr:", error); + } + } + + this.addNoParking(parsedBoundary || [], noparking.parkingId); this.addMarker2( noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", @@ -679,8 +992,21 @@ export default { }); this.noridingList.forEach((noriding) => { + console.log(noriding, "noridingnoriding"); + let boundaryStr = noriding.boundaryStr; + let parsedBoundary = []; + + // 同样地，对 boundaryStr 进行有效性检查 + if (boundaryStr && boundaryStr.trim() !== "") { + try { + parsedBoundary = JSON.parse(boundaryStr); + } catch (error) { + console.error("Error parsing noriding boundaryStr:", error); + } + } + this.addNoriding( - JSON.parse(noriding.boundaryStr) || [], + parsedBoundary || [], noriding.parkingName, noriding.longitude, noriding.latitude, @@ -728,6 +1054,7 @@ export default { fillColor: "#71b7cc", }); }); + polygon.setExtData({ parkingId: parkingId }); polygon.on("mouseout", () => { polygon.setOptions({ fillOpacity: 0.5, @@ -741,10 +1068,39 @@ export default { this.map.add(polygon); }, highlightRow(parkingId) { - this.$set(this, "highlightedId", parkingId); - // this.showtable = false; - this.$refs.myTable.setCurrentRow(this.parkingList[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; @@ -756,7 +1112,7 @@ export default { } }, - addNoParking(data,parkingId) { + addNoParking(data, parkingId) { let polygon = new AMap.Polygon({ path: data, fillColor: "#ccebc5", @@ -773,6 +1129,7 @@ export default { fillColor: "#ff0000", }); }); + polygon.setExtData({ parkingId: parkingId }); polygon.on("mouseout", () => { polygon.setOptions({ fillOpacity: 0.5, @@ -816,12 +1173,13 @@ export default { this.map.add(text); this.labels.push(text); }, - addNoriding(data, title, lon, lat,parkingId) { + addNoriding(data, title, lon, lat, parkingId) { + console.log("禁行区"); 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", @@ -829,13 +1187,13 @@ export default { }); polygon.on("mouseover", () => { polygon.setOptions({ - fillOpacity: 0.7, - fillColor: "#FFEBA4FF", + fillOpacity: 0.1, + fillColor: "#fff", }); }); polygon.on("mouseout", () => { polygon.setOptions({ - fillOpacity: 0.5, + fillOpacity: 0.1, fillColor: "#ffeba4", }); }); @@ -845,63 +1203,13 @@ export default { }); this.map.add(polygon); }, - initEditor() { - var path1 = []; - if (this.areaId) { - path1 = JSON.parse(this.pathList) || []; - } - var polygon1 = new AMap.Polygon({ - path: path1, - }); - this.map.add([polygon1]); - polyEditor = new AMap.PolygonEditor(this.map); - // console.log(polyEditor); - // console.dir(polyEditor); - polyEditor.on("add", (data) => { - // console.log(data); - this.coordList = data.lnglat; - var polygon = data.target; - polygon.on("dblclick", () => { - polyEditor.setTarget(polygon); - polyEditor.open(); - }); - }); - polygon1.on("dblclick", () => { - polyEditor.setTarget(polygon1); - polyEditor.open(); - }); - - return polyEditor; - }, createPolygon() { this.status = true; - polyEditor.close(); + // polyEditor.close(); polyEditor.setTarget(); polyEditor.open(); }, - editClose: function () { - // console.log("this", this); - - let that = this; - polyEditor.on("end", function (event) { - // event.target 即为编辑后的多边形对象 - //多边形的坐标 - this.coordList = event.target.getPath(); - // console.log("coordList", this.coordList); - let mapList = []; - this.coordList.forEach((v) => { - // console.log("v", v.lng, "--", v.lat); - mapList.push([v.lng, v.lat]); - }); - let center = calculateCenter(mapList); - console.log(mapList, "mapListmapList"); - that.$emit("mapList", mapList); - - that.$emit("center", center); - }); - polyEditor.close(); - }, }, beforeDestroy() { clearInterval(this.timer); @@ -910,27 +1218,32 @@ export default {