11

src/view/sy_map.vue

@@ -111,7 +111,7 @@
       <div class="right" style="width: 517px" v-show="!showEdit">
         <div class="jbggfwq">
           <div class="title">
-            <div class="title_name">
+            <div class="title_name" >
               <span> 基本公共服务圈</span>
             </div>
           </div>
@@ -164,6 +164,13 @@
         >
           修改村名
         </div>
+        <div
+          class="btnopen"
+          @click="centerEdit"
+          v-if="!add_mode && !edit_mode && !move_mode"
+        >
+          修改村社中心点
+        </div>
         <div
           class="btnsave"
           @click="addmode"
@@ -276,6 +283,7 @@
           <div class="text">加载中...</div>
         </div>
       </div>
+      <!-- 修改村名 -->
       <el-dialog v-model="dialogVisible" title="修改村名" width="500">
         <el-input
           v-model="input1"
@@ -288,6 +296,14 @@
           </div>
         </template>
       </el-dialog>
+      <el-dialog v-model="dialogVisible3" title="修改村社中心点" width="500">
+        <el-input v-model="input2" placeholder="请选择" disabled />
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button type="primary" @click="csCenter()"> 确认修改 </el-button>
+          </div>
+        </template>
+      </el-dialog>
       <el-dialog v-model="dialogVisible2" title="新村社列表" width="500">
         <el-form
           :model="add_new_cs"
@@ -347,6 +363,7 @@ import j8 from "@/assets/images/map/j8.png";
 import j9 from "@/assets/images/map/j9.png";
 import j10 from "@/assets/images/map/j10.png";
 import j11 from "@/assets/images/map/j11.png";
+import j10_map from "@/assets/images/map/j10_map.png";
 import j11_map from "@/assets/images/map/j11_map.png";
 import dwd from "@/assets/images/map/dwd.png";
 import fwqbg1 from "@/assets/images/map/qlv.png";
@@ -400,8 +417,10 @@ const addPd = computed(() => {
 });
 //编辑村名
 const input1 = ref("");
+const input2 = ref([]);
 const dialogVisible = ref(false);
 const dialogVisible2 = ref(false);
+const dialogVisible3 = ref(false);
 //加载
 const loadingss = ref(false);
 const loadTable = ref(false);
@@ -793,8 +812,10 @@ const yaosuTotal = ref([
   {
     id: 10,
     name: "AED",
+    img_map: j10_map,
     img: j10,
     wz: true,
+    url: "/api/ggfwyth/ysyzt/getAeds",
   },
   {
     id: 11,
@@ -902,7 +923,7 @@ const pagination = reactive({
 //--------定义方法----------------------------------------
 //地图初始化
 const initMap = () => {
-  map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 20 });
+  map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 16 });
   map.setMapType(BMAP_SATELLITE_MAP);
   map.enableScrollWheelZoom(true);
   goMapCenter([119.178783, 29.034583], 11);
@@ -918,7 +939,6 @@ const getCssj = async () => {
   await http.get("/api/ggfwyth/regionalDivision/getDetails").then((res) => {
     if (res.code == 200) {
       cssj = JSON.parse(res.data);
-      console.log(4444);
     }
   });
 };
@@ -1047,13 +1067,11 @@ const moveBack = () => {
 //移动保存
 const moveDK = async () => {
   loadingss.value = true;
-  await http
+  let sj = {
-    .post(
+    id: changeCsqkId.value,
-      `/api/ggfwyth/regionalDivision/edit?id=${
+    data: JSON.stringify(arrJWD),
-        changeCsqkId.value
+  };
-      }&data=${JSON.stringify(arrJWD)}`
+  await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => {
-    )
-    .then((res) => {
     if (res.code == 200) {
       ElMessage.success({
         message: "保存成功",
@@ -1147,40 +1165,78 @@ const backEdit = () => {
   showEdit.value = false;
   drawing.value = false;
 };
-//上传编辑的地块
+const shangchuan = async () => {
-const saveDK = async () => {
+  for (const item of xkzDk) {
-  loadingss.value = true;
+    let a = [];
-  await http
+    a.push(item.point);
-    .post(
+    // console.log(JSON.stringify(a));
-      `/api/ggfwyth/regionalDivision/edit?id=${
+    let sj = {
-        changeCsqkId.value
+      id: item.id,
-      }&data=${JSON.stringify(arrJWD)}`
+      data: JSON.stringify(a),
-    )
+    };
-    .then((res) => {
+    await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => {
       if (res.code == 200) {
         ElMessage.success({
           message: "保存成功",
         });
       }
     });
-  await getCssj();
+    await new Promise((resolve) => setTimeout(resolve, 300));
-  await loadCs(cfJd.value);
-  cs_choose_arr.value.forEach((item, index) => {
-    map.removeOverlay(cs_choose_arr.value[index]);
-  });
-  chooseCsList.value.length = 0;
-  xkzDk.forEach((itemm, indexx) => {
-    if (itemm.name == cfCs.value) {
-      chooseCsList.value.push(itemm);
-      addCsChoose();
   }
-  });
+  // xkzDk.forEach(async (item, index) => {
-  loadingss.value = false;
+  //   let a = [];
+  //   a.push(item.point);
+  //   console.log(JSON.stringify(a));
+  //   let sj = {
+  //     id: item.id,
+  //     data: JSON.stringify(a),
+  //   };
+  //   await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => {
+  //     if (res.code == 200) {
+  //       ElMessage.success({
+  //         message: "保存成功",
+  //       });
+  //     }
+  //   });
+  // });
+};
+//上传编辑的地块
+const saveDK = async () => {
+  loadingss.value = true;
+  let sj = {
+    id: changeCsqkId.value,
+    data: JSON.stringify(arrJWD),
+  };
+  console.log(sj.data);
+
+  // await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => {
+  //   if (res.code == 200) {
+  //     ElMessage.success({
+  //       message: "保存成功",
+  //     });
+  //   }
+  // });
+  // await getCssj();
+  // await loadCs(cfJd.value);
+  // cs_choose_arr.value.forEach((item, index) => {
+  //   map.removeOverlay(cs_choose_arr.value[index]);
+  // });
+  // chooseCsList.value.length = 0;
+  // xkzDk.forEach((itemm, indexx) => {
+  //   if (itemm.name == cfCs.value) {
+  //     chooseCsList.value.push(itemm);
+  //     addCsChoose();
+  //   }
+  // });
+  // loadingss.value = false;
 };
 //修改村名
 const nameEdit = () => {
   dialogVisible.value = true;
 };
+const centerEdit = () => {
+  dialogVisible3.value = true;
+};
 const csName = async () => {
   let n = input1.value;
   await http
@@ -1214,6 +1270,44 @@ const csName = async () => {
     });
   }, 500);
 };
+const csCenter = async () => {
+  let regionalDivisionEditDTO = {
+    id: changeCsqkId.value,
+    data: JSON.stringify(input2.value),
+  };
+
+  await http
+    .post(
+      `/api/ggfwyth/regionalDivision/updateCsCenter`,
+      regionalDivisionEditDTO
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        ElMessage.success({
+          message: "修改村社中心点成功",
+        });
+      }
+    });
+  input2.value = [];
+  dialogVisible3.value = false;
+  await getCssj();
+  await loadCs(cfJd.value);
+  cs_dd_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_dd_arr.value[index]);
+  });
+  cs_dd_arr.value = [];
+  xkzCenter.forEach((a) => {
+    if (a.name == cfCs.value) {
+      cs_dd_arr.value.push(a);
+    }
+  });
+  console.log("cs_dd_arr.value", cs_dd_arr.value);
+  setTimeout(() => {
+    cs_dd_arr.value.map((item, index) => {
+      DGcreateCs(item, index);
+    });
+  }, 200);
+};
 //添加模式
 const addmode = () => {
   add_mode.value = true;
@@ -1466,6 +1560,9 @@ const markera = (e) => {
   if (add_mode.value) {
     add_new_cs.center = [e.latlng.lng, e.latlng.lat];
   }
+  if (!drawing.value) {
+    input2.value = [e.latlng.lng, e.latlng.lat];
+  }
 };
 //点击人口数(关键字存age)
 const buten = async (item) => {
@@ -2259,7 +2356,7 @@ const changeys = (name) => {
         img_map = item.img_map;
       }
     });
-    if (name == "摄像头") {
+    if (name == "摄像头" || name == "AED") {
       getZyys(url, name, img, img_map);
     }
   }
@@ -2272,10 +2369,21 @@ const getZyys = (url, name, img, img_map) => {
         item.img = img;
         item.img_map = img_map;
         item.overlay = null;
-        // item.center = [];
+        item.center = [];
         // item.center.push(Number(item.jd));
         // item.center.push(Number(item.wd));
+        switch (name) {
+          case "摄像头":
             item.center = [Number(item.jd), Number(item.wd)];
+            break;
+          case "AED":
+            let newStr = item.point.replace("，", ",");
+            item.center = JSON.parse(newStr);
+            break;
+          default:
+            break;
+        }
+
         // item.onClick = () => {
         //   handleItemClick(item, index, name);
         // };
@@ -2321,10 +2429,17 @@ const createZyys = (polygon, indexx, name) => {
   );
   map.addOverlay(yaosuIcon.value[name].sj[indexx].overlay);
   yaosuIcon.value[name].sj[indexx].overlay.addEventListener("click", () => {
+    switch (name) {
+      case "摄像头":
         sxtShow.deviceCode = polygon.sbbm;
         sxtShow.name = polygon.sbmc;
         getCameraUrl();
-    // console.log(polygon);
+        break;
+      case "AED":
+        break;
+      default:
+        break;
+    }
   });
 };
 //获取摄像头地址
@@ -2910,13 +3025,19 @@ const loadTown = () => {
   }
 };
 //添加地图区块
-// 创建一个偏移函数
+// 创建一个偏移函数(用于街道)
 const offsetPoint = (point, offsetX, offsetY) => {
-  return new BMapGL.Point(point.lng + offsetX, point.lat - offsetY);
+  return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY);
+};
+//用于村社
+const offsetPoint2 = (point, offsetX, offsetY) => {
+  return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY);
 };
 // 设置偏移量
-let offsetX = 0.00095; // 横向偏移量
+let offsetX = 0.01095; // 横向偏移量
-let offsetY = 0.00014; // 纵向偏移量
+let offsetY = 0.00314; // 纵向偏移量
+let offsetX2 = 0.01; // 横向偏移量
+let offsetY2 = 0.00328; // 纵向偏移量
 const addPolygonCounty = () => {
   map.clearOverlays();
   let fillColor = "#ffffff";
@@ -2925,7 +3046,9 @@ const addPolygonCounty = () => {
     //地区的坐标范围
     let points = [];
     item.point.map((p) => points.push(new BMapGL.Point(...p)));
-    let offsetPoints = points.map((point) => offsetPoint(point, offsetX, offsetY));
+    let offsetPoints = points.map((point) =>
+      offsetPoint(point, offsetX, offsetY)
+    );
     if (points.length) {
       //创建面
       let polygon = new BMapGL.Polygon(offsetPoints, {
@@ -3037,7 +3160,8 @@ const createCustomOverlayJd = (polygon, indexx) => {
   jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       type: "customOverlay",
@@ -3109,7 +3233,8 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
   jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],
@@ -3159,14 +3284,22 @@ const loadCs = async (name) => {
   }
   console.log(6666);
 };
-//添加村社区块
+//添加村社区块shangchuan
 const addPolygonCountyCs = () => {
   xkzDk.map((item, index) => {
     let num = index % 9;
     let fillColor = colorList[num].bg;
     //地区的坐标范围
     let points = [];
+    // console.log(item.name,item.point[0]);
+    // item.point[0].forEach((itemm, indexx) => {
+    //   itemm[0] = itemm[0] + 0.01;
+    //   itemm[1] = itemm[1] + 0.00328;
+    // });
     item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    let offsetPoints2 = points.map((point) =>
+      offsetPoint2(point, offsetX2, offsetY2)
+    );
     if (points.length) {
       //创建面
       cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
@@ -3227,6 +3360,7 @@ const addPolygonCountyCs = () => {
     }
   });
 };
+
 //添加选中社区
 const addCsChoose = () => {
   chooseCsList.value.map((item, index) => {
@@ -3235,6 +3369,9 @@ const addCsChoose = () => {
     //地区的坐标范围
     let points = [];
     item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    // let offsetPoints2 = points.map((point) =>
+    //   offsetPoint2(point, offsetX2, offsetY2)
+    // );
     if (points.length) {
       //创建面
       cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
@@ -3257,6 +3394,9 @@ const addCsUnChoose = () => {
     //地区的坐标范围
     let points = [];
     item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    // let offsetPoints2 = points.map((point) =>
+    //   offsetPoint2(point, offsetX2, offsetY2)
+    // );
     if (points.length) {
       //创建面
       cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
@@ -3323,6 +3463,8 @@ const addCsUnChoose = () => {
 //创建村社
 const addCs = () => {
   xkzCenter.map((item, index) => {
+    console.log(item.name,typeof item.center);
+    
     createCs(item, index);
   });
 };
@@ -3342,7 +3484,6 @@ const createCs = (polygon, indexx) => {
     content.style.height = "60px";
     content.style.width = "60px";
     content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
-
     var div = document.createElement("div");
     div.style.color = "#333";
     div.style.whiteSpace = "nowrap";
@@ -3376,7 +3517,8 @@ const createCs = (polygon, indexx) => {
   cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       imgSrc2: dwd,
@@ -3444,7 +3586,8 @@ const createCs2 = (polygon, indexx) => {
   cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],
@@ -3502,7 +3645,8 @@ const DGcreateCs = (polygon, indexx) => {
   cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       imgSrc2: dwd,
@@ -3584,7 +3728,8 @@ const DGcreateCs2 = (polygon, indexx) => {
   cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: -10,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],
@@ -3626,7 +3771,7 @@ const reset_font2 = () => {
     "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
 onMounted(async () => {
-  // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
+  tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
   loadingss.value = true;
   reset_font();
   initMap();