运营区修改

src/views/system/area/areaRange.vue

@@ -408,6 +408,7 @@ export default {
       showtable: true,
       currentRow: null,
       ischange: false,
+      currentPolygon: null,
       // 表单校验
       rules: {
         parkingName: [
@@ -572,32 +573,114 @@ export default {
       // this.initEditor();
     },
     initEditor(pathList) {
-      this.ischange = true;
+      console.log('创建了');
-      var path1 = [];
+  this.ischange = true;
-      path1 = JSON.parse(pathList) || [];
+    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 设为一个空数组
+  }
 
-      var polygon1 = new AMap.Polygon({
+  // 创建并保存当前编辑的多边形引用
-        path: path1,
+  this.currentPolygon = new AMap.Polygon({
-      });
+    path: path1,
-      this.map.add([polygon1]);
+    fillColor: "#f0e68c", // 设置颜色
-      polyEditor = new AMap.PolygonEditor(this.map);
+    fillOpacity: 0.3, // 设置透明度
-      // console.log(polyEditor);
+    strokeColor: "#ffcc00",
-      // console.dir(polyEditor);
+    strokeWeight: 2,
-      polyEditor.on("add", (data) => {
+    strokeStyle: "solid",
-        // console.log(data);
+  });
-        this.coordList = data.lnglat;
+  this.map.add([this.currentPolygon]);
-        var polygon = data.target;
+
-        polygon.on("dblclick", () => {
+  polyEditor = new AMap.PolygonEditor(this.map);
-          polyEditor.setTarget(polygon);
+  polyEditor.setTarget(this.currentPolygon); // 设置当前多边形为编辑目标
-          polyEditor.open();
+
+  // 为多边形和多边形编辑器添加事件监听
+  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];
       });
-      polygon1.on("dblclick", () => {
+      polyEditor.close();
-        polyEditor.setTarget(polygon1);
+      this.sub();
-        polyEditor.open();
-      });
-
-      return polyEditor;
     },
     scrollToRow(rowIndex) {
       // 获取表格的DOM元素
@@ -636,6 +719,9 @@ export default {
     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;
@@ -798,18 +884,7 @@ export default {
         element.style.visibility = this.show ? "hidden" : "visible";
       });
     },
-    clearPolygon() {
-      this.status = false;
-      const polygons = polyEditor.getPolygons(); // 获取当前编辑的多边形
-      console.log(polygons, "polygonspolygons");
-      polygons.forEach((polygon) => {
-        this.map.remove(polygon); // 只移除当前编辑的多边形
-      });
-      polyEditor.close(); // 关闭多边形编辑器
 
-      // 清空与多边形相关的状态或数据
-      this.coordList = "";
-    },
     changeMapStyle() {
       // 创建一个默认的图层组件
       let defaultLayer = new AMap.TileLayer();
@@ -832,9 +907,9 @@ export default {
         this.type = "default";
       }
     },
-    start() {
+    // start() {
-      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
+    //   this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
-    },
+    // },
     initAMap() {
       AMapLoader.load({
         key: globalConfig.aMap.key,
@@ -864,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",
@@ -878,12 +969,20 @@ export default {
               "#1890ff"
             );
           });
-
           this.noParkingList.forEach((noparking) => {
-            this.addNoParking(
+            let boundaryStr = noparking.boundaryStr;
-              JSON.parse(noparking.boundaryStr) || [],
+            let parsedBoundary = [];
-              noparking.parkingId
+
-            );
+            // 如果 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",
@@ -893,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,
@@ -1062,6 +1174,7 @@ export default {
       this.labels.push(text);
     },
     addNoriding(data, title, lon, lat, parkingId) {
+      console.log("禁行区");
       let polygon = new AMap.Polygon({
         path: data,
         fillColor: "#fff9e6", // 更淡的黄色
@@ -1074,13 +1187,13 @@ export default {
       });
       polygon.on("mouseover", () => {
         polygon.setOptions({
-          fillOpacity: 0.7,
+          fillOpacity: 0.1,
-          fillColor: "#FFEBA4FF",
+          fillColor: "#fff",
         });
       });
       polygon.on("mouseout", () => {
         polygon.setOptions({
-          fillOpacity: 0.5,
+          fillOpacity: 0.1,
           fillColor: "#ffeba4",
         });
       });
@@ -1093,38 +1206,10 @@ export default {
 
     createPolygon() {
       this.status = true;
-      polyEditor.close();
+      // 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();
-    },
   },
   beforeDestroy() {
     clearInterval(this.timer);