Merge branch 'main' of https://git.cityme.com.cn/xiangshan/ggfwjsc

src/view/sy_map.vue

@@ -155,13 +155,31 @@
         </div>
       </div>
       <div class="btns" v-if="showEdit">
-        <div class="btnsave" @click="nameEdit">修改村名</div>
+        <div class="btnsave" @click="nameEdit" v-if="!add_mode && !edit_mode">
-        <div class="btnsave" @click="draw">添加地块</div>
+          修改村名
-        <div class="btnopen" @click="openEdit">编辑地块</div>
+        </div>
-        <div class="btnsave" @click="saveEdit">保存地块</div>
+        <div class="btnsave" @click="addmode" v-if="!edit_mode && !add_mode">
-        <div class="btnsave">删除地块</div>
+          添加
-        <div class="btnclose" @click="closeEdit">取消编辑</div>
+        </div>
-        <div class="btnclose" @click="backEdit">退出编辑</div>
+        <div style="display: flex" v-if="add_mode">
+          <div class="btnsave" @click="draw">添加地块</div>
+          <div class="btnsave" @click="cancel">取消地块</div>
+          <div class="btnsave" @click="addcenter">添加中心点</div>
+          <div class="btnsave" @click="look">查看添加列表</div>
+          <div class="btnsave" @click="addBack">退出添加</div>
+        </div>
+        <div class="btnopen" @click="editmode" v-if="!edit_mode && !add_mode">
+          编辑
+        </div>
+        <div style="display: flex" v-if="edit_mode">
+          <div class="btnopen" @click="openEdit">编辑地块</div>
+          <div class="btnsave" @click="saveEdit">保存地块</div>
+          <div class="btnclose" @click="closeEdit">退出编辑</div>
+        </div>
+        <div class="btnsave" v-if="!add_mode && !edit_mode" @click="deleteCs">
+          删除地块
+        </div>
+        <div class="btnclose" @click="backEdit">退出</div>
       </div>
 
       <Dialog
@@ -224,6 +242,28 @@
           </div>
         </template>
       </el-dialog>
+      <el-dialog v-model="dialogVisible2" title="新村社列表" width="500">
+        <el-form
+          :model="add_new_cs"
+          label-width="auto"
+          style="max-width: 500px"
+        >
+          <el-form-item label="村社名">
+            <el-input v-model="add_new_cs.name" />
+          </el-form-item>
+          <el-form-item label="村社中心点">
+            <el-input v-model="add_new_cs.center" disabled />
+          </el-form-item>
+          <el-form-item label="村社范围">
+            <el-input v-model="add_new_cs.area" disabled />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button type="primary" @click="addNew()"> 确认添加 </el-button>
+          </div>
+        </template>
+      </el-dialog>
     </teleport>
   </div>
 </template>
@@ -239,7 +279,7 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import tools from "@/utils/tools";
 import initializeMap from "@/utils/mapInitializer.js";
 import http from "@/utils/request.js";
@@ -278,13 +318,22 @@ import AED from "@/assets/images/map/AED.png";
 import Dialog from "./dialog/dialogMapDp.vue";
 import personDetail from "./person/index.vue";
 // import gcj02towgs84 from "@/utils/gcj02towgs84.js";
-import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
+// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
+import { DrawScene, PolygonDraw } from "bmap-draw";
 //--------定义参数-------
-//测绘模式
+//测绘模式等
 const drawing = ref(false);
+const add_mode = ref(false);
+const edit_mode = ref(false);
+const add_new_cs = reactive({
+  name: "",
+  center: [],
+  area: [[[]]],
+});
 //编辑村名
 const input1 = ref("");
 const dialogVisible = ref(false);
+const dialogVisible2 = ref(false);
 //加载
 const loadingss = ref(false);
 const loadTable = ref(false);
@@ -831,13 +880,15 @@ const initMap = () => {
   addJd();
 };
 const getCssj = async () => {
-  await http
+  await http.get("/api/ggfwyth/regionalDivision/getDetails").then((res) => {
-    .get("/api/ggfwyth/regionalDivision/getCsRegionalDivision")
+    if (res.code == 200) {
-    .then((res) => {
+      cssj = JSON.parse(res.data);
-      if (res.code == 200) {
+    }
-        cssj = JSON.parse(res.data);
+  });
-      }
+};
-    });
+//编辑模式
+const editmode = () => {
+  edit_mode.value = true;
 };
 //存放编辑的地块数据
 var arrJWD = [[[]]];
@@ -889,12 +940,14 @@ const closeEdit = async () => {
     map.removeOverlay(cs_choose_arr.value[index]);
   });
   addCsChoose();
+  edit_mode.value = false;
   drawing.value = false;
   // let a = document.documentElement.getElementsByClassName("left")[0];
   // a.style.opacity = "1";
   // let b = document.documentElement.getElementsByClassName("right")[0];
   // b.style.opacity = "1";
 };
+//退出
 const backEdit = () => {
   cs_choose_arr.value[0].disableEditing();
   cs_choose_arr.value.forEach((item, index) => {
@@ -902,12 +955,13 @@ const backEdit = () => {
   });
   addCsChoose();
   showEdit.value = false;
+  drawing.value = false;
 };
 //上传编辑的地块
 const saveDK = async () => {
   await http
     .post(
-      `/api/ggfwyth/regionalDivision/updateCsManagerRegionalDivision?id=${
+      `/api/ggfwyth/regionalDivision/edit?id=${
         changeCsqkId.value
       }&data=${JSON.stringify(arrJWD)}`
     )
@@ -970,34 +1024,153 @@ const csName = async () => {
     });
   }, 500);
 };
+//添加模式
+const addmode = () => {
+  add_mode.value = true;
+};
 //添加地块
+const sceneDrawStatus = ref(null);
+const scene = ref(null);
 const draw = () => {
   drawing.value = true;
-  map.removeEventListener("click", markera); //移除点击事件监听器
+  map.removeEventListener("click", markera);
   if (currentMarker !== null) {
-    map.removeOverlay(currentMarker); //移除当前标记
+    map.removeOverlay(currentMarker);
   }
-  const scene = new DrawScene(map); //创建绘制场景
+  let drawScene = new DrawScene(map, {
-  const areaMeasure = new AreaMeasure(scene, {
+    noLimit: true,
-    // labelOptions: {
-    //   color:'red',
-    // },
-  }); //创建面积测量工具
-  areaMeasure.open(); //打开面积测量工具
-  //添加测量结束事件监听器
-  areaMeasure.addEventListener("measure-area-end", (e) => {
-    console.log(e);
-    const labels = document.querySelectorAll(".BMapLabel");
-    labels.forEach((label) => label.remove());
-    const points = e.target.points;
-    let res = [];
-    points.map((item) => {
-      res.push(`${item.lng},${item.lat}`);
-    });
-    // mapData.points = res;//处理测量结果
-    ElMessage.success("选取范围成功");
-    areaMeasure.close(); //关闭面积测量工具
   });
+  let polygon = new PolygonDraw(drawScene, {
+    hideTip: true, // 隐藏绘制提示
+    isSeries: false, // 是否开启批量绘制
+    isOpen: true,
+    labelOptions: {
+      borderRadius: "2px",
+      background: "#b5d3fb",
+      border: "1px solid #b5d3fb",
+      color: "#333",
+      fontSize: "5px",
+      letterSpacing: "0",
+      padding: "2px",
+    },
+    baseOpts: {
+      fillColor: "#fff",
+      strokeWeight: 2,
+      strokeOpacity: 1,
+      fillOpacity: 0.2,
+    },
+  });
+  sceneDrawStatus.value = polygon;
+  scene.value = drawScene;
+  sceneDrawStatus.value.open();
+};
+//取消地块
+const cancel = () => {
+  scene.value.clearData();
+  sceneDrawStatus.value.closeAll();
+  sceneDrawStatus.value = null;
+  scene.value = null;
+};
+//添加中心点
+const addcenter = () => {
+  BMAP();
+};
+//查看添加列表
+const look = () => {
+  add_new_cs.area[0][0] = [];
+  console.log(111111111, sceneDrawStatus.value);
+  sceneDrawStatus.value?.points.forEach((item, index) => {
+    let arr1 = [];
+    arr1.push(item.lng);
+    arr1.push(item.lat);
+    add_new_cs.area[0][0].push(arr1);
+  });
+  dialogVisible2.value = true;
+};
+//添加请求
+const addNew = async () => {
+  let data1 = {
+    type: "Feature",
+    id: "",
+    geometry: {
+      type: "MultiPolygon",
+      coordinates: [],
+    },
+    properties: {
+      name: "",
+      center: [],
+      layer: "乡镇",
+    },
+  };
+  let sj = {
+    name: cfJd.value,
+    data: {},
+  };
+  data1.id = `${cfJd.value}_${add_new_cs.name}`;
+  data1.geometry.coordinates = [...add_new_cs.area];
+  data1.properties.name = add_new_cs.name;
+  data1.properties.center = add_new_cs.center;
+  sj.data = JSON.stringify(data1);
+  await http.post(`/api/ggfwyth/regionalDivision/add`, sj).then((res) => {
+    if (res.code == 200) {
+      ElMessage.success({
+        message: "添加成功",
+        offset: 100, // 距离窗口顶部的偏移量
+      });
+      dialogVisible2.value = false;
+    }
+  });
+  cancel();
+  await getCssj();
+  await loadCs(cfJd.value);
+  unChooseList.value.length = 0;
+  xkzDk.forEach((itemm, indexx) => {
+    if (itemm.name != cfCs.value) {
+      unChooseList.value.push(itemm);
+    }
+  });
+    addCsUnChoose();
+};
+//删除
+const deleteCs = async () => {
+  ElMessageBox.confirm("确定要删除当前村社?")
+    .then(() => {
+      http
+        .post(`/api/ggfwyth/regionalDivision/del?id=${changeCsqkId.value}`)
+        .then((res) => {
+          if (res.code == 200) {
+            ElMessage.success({
+              message: "删除成功",
+              offset: 100, // 距离窗口顶部的偏移量
+            });
+            cs_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_choose_arr.value[index]);
+            });
+            cs_dd_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_dd_arr.value[index]);
+            });
+          }
+        });
+      setTimeout(() => {
+        getCssj();
+      }, 300);
+      setTimeout(() => {
+        loadCs(cfJd.value);
+      }, 500);
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+
+//退出添加模式
+const addBack = () => {
+  add_mode.value = false;
+  drawing.value = false;
+  map.removeEventListener("click", markera);
+  if (currentMarker !== null) {
+    map.removeOverlay(currentMarker);
+  }
 };
 //点击龙游县初始化
 const csh = () => {
@@ -1081,6 +1254,9 @@ const markera = (e) => {
   // 将新标记添加到地图中并更新当前标记引用
   map.addOverlay(marker);
   currentMarker = marker;
+  if (add_mode.value) {
+    add_new_cs.center = [e.latlng.lng, e.latlng.lat];
+  }
 };
 //点击人口数(关键字存age)
 const buten = async (item) => {