资源要素

src/view/person/rwTable.vue

@@ -211,4 +211,8 @@ onMounted(() => {
   font-size: 18px;
   border: none;
 }
+:deep(.el-table) {
+    --el-table-border-color: #62696d;
+    // border: 1px solid #62696d;
+  }
 </style>

src/view/sy_map.vue

@@ -155,7 +155,6 @@
             </div>
           </div>
         </div>
-       
       </div>
       <div class="btns" v-if="showEdit">
         <div
@@ -412,6 +411,7 @@ import j3_map from "@/assets/images/map/j3_map.png";
 import j4_map from "@/assets/images/map/j4_map.png";
 import j5_map from "@/assets/images/map/j5_map.png";
 import j7_map from "@/assets/images/map/j7_map.png";
+import j9_map from "@/assets/images/map/j9_map.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";
@@ -481,15 +481,20 @@ const message = ref({});
 //存放渲染的地块及图标的数组
 const jdm_arr = ref([]); //街道名
 const jdm_number_arr = ref([]); //街道名(+数量)
-const fwq_list_arr = ref([]); //基本公共服务圈
-const fwq_dk = ref([]); //基本公共服务圈村社地块
-const fwq_center = ref([]); //基本公共服务圈中心点
 const cs_qk_arr = ref([]); //社区彩色区块
 const cs_name_arr = ref([]); //社区名
 const cs_number_name_arr = ref([]); //社区名(+数量)
 const cs_choose_arr = ref([]); //单点社区对应的区块(蓝色)
 const cs_un_choose_arr = ref([]); //单点社区其他区块(灰色)
 const cs_dd_arr = ref([]); //单点社区名
+//---------
+const fwq_list_arr = ref([]); //基本公共服务圈
+const fwq_dk = ref([]); //基本公共服务圈村社地块
+const fwq_center = ref([]); //基本公共服务圈中心点
+//---------
+const zyys_dk = ref([]); //资源要素地块
+const zyys_center = ref([]); //资源要素中心点(人口数)
+//---------
 //存放村社区块
 const csqk = ref({});
 var cssj;
@@ -880,7 +885,10 @@ const yaosuTotal = ref([
     id: 9,
     name: "卫生服务中心",
     img: j9,
+    img_map: j9_map,
     wz: true,
+    tooltip: "zyysmc",
+    url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=卫生服务中心",
   },
   {
     id: 10,
@@ -1096,7 +1104,6 @@ const initMap = () => {
   } else {
     totalType.value = 2;
     map.setMapType(BMAP_SATELLITE_MAP);
-
   }
   map.enableScrollWheelZoom(true);
   goMapCenter([119.178783, 29.034583], 11);
@@ -1821,26 +1828,33 @@ const clear = () => {
 //清空选中年龄及标签(街道级别)
 const clearPerson = () => {
   if (choose.value.person) {
-    choose.value.person='';
+    choose.value.person = "";
     jdm_number_arr.value.forEach((item, index) => {
       map.removeOverlay(jdm_number_arr.value[index]);
     });
     addJd();
   }
-}
+};
 //清空要素
 const clearyaosu = () => {
-  
   if (yaosuList.value.length != 0) {
     yaosuList.value.forEach((name, index) => {
       yaosuIcon.value[name].sj.forEach((item, index) => {
-      map.removeOverlay(yaosuIcon.value[name].sj[index].overlay);
+        map.removeOverlay(item.overlay);
+      });
     });
-    })
-    yaosuList.value.length=0;
-  }
 
+    zyys_dk.value.forEach((item, index) => {
+      map.removeOverlay(item); // 清空服务圈 图标
+    });
+    zyys_center.value.forEach((item, index) => {
+      map.removeOverlay(item); // 清空服务圈 图标
+    });
+    yaosuList.value.length = 0;
+    zyys_dk.value.length = 0;
+    zyys_center.value.length = 0;
   }
+};
 //定义地图中点
 const goMapCenter = (point, zoom) => {
   map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
@@ -2737,7 +2751,8 @@ const changeys = (name) => {
       name == "小学" ||
       name == "初中" ||
       name == "高中" ||
-      name == "医院"
+      name == "医院" ||
+      name == "卫生服务中心"
     ) {
       getZyys(url, name, img, img_map, tooltip);
     }
@@ -2837,7 +2852,9 @@ const createZyys = (polygon, indexx, name, tooltip) => {
     }
   );
   map.addOverlay(yaosuIcon.value[name].sj[indexx].overlay);
-  yaosuIcon.value[name].sj[indexx].overlay.addEventListener("click", () => {
+  yaosuIcon.value[name].sj[indexx].overlay.addEventListener(
+    "click",
+    async () => {
       switch (name) {
         case "摄像头":
           sxtShow.deviceCode = polygon.sbbm;
@@ -2846,12 +2863,161 @@ const createZyys = (polygon, indexx, name, tooltip) => {
           break;
         case "AED":
           break;
-      default:
+        case "体育场所":
           break;
+        case "南孔书院":
+          break;
+        case "养老机构":
+          break;
+        case "汽车充电桩":
+          break;
+        default:
+          if (zyys_dk.value.length) {
+            zyys_dk.value.forEach((item, index) => {
+              map.removeOverlay(item); // 清空服务圈 图标
+            });
+            zyys_center.value.forEach((item, index) => {
+              map.removeOverlay(item); // 清空服务圈 图标
+            });
+          }
+
+          await get_dk_zyys(
+            polygon.xzjd,
+            polygon.csq,
+            polygon.num,
+            polygon.zyysmc
+          );
+          if (zyys_data.value.point.length == 0) {
+            ElMessage.warning({
+              message: "地图上未找到对应村社",
+            });
+          }else{
+            xr_dk_center_zyys();
+          }
+          
+          break;
+      }
+    }
+  );
+};
+//资源要素(获取对应村社的地块)
+const zyys_data = ref({
+  point: [],
+  center: [],
+  name: "",
+});
+const get_dk_zyys = async (xzjd, csq, number, name) => {
+  zyys_dk.value.length = 0;
+  zyys_center.value.length = 0;
+  zyys_data.value.point.length = 0;
+  zyys_data.value.center.length = 0;
+  zyys_data.value.name = "";
+  await loadCs(xzjd);
+  zyys_data.value.name = csq;
+  xkzDk.forEach((dk) => {
+    if (csq == dk.name) {
+      zyys_data.value.point.push(dk);
+    }
+  });
+  xkzCenter.forEach((center) => {
+    if (csq == center.name) {
+      let a = { ...center, num: number };
+      zyys_data.value.center.push(a);
     }
   });
 };
+//资源要素(渲染地块)
+const xr_dk_center_zyys = async () => {
+  zyys_data.value.point.map((item, index) => {
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      zyys_dk.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: "blue",
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: "blue",
+        fillOpacity: 0.3,
+        zIndex: 5,
+      });
+      map.addOverlay(zyys_dk.value[index]);
+    }
+  });
+  zyys_data.value.center.map((item, index) => {
+    Xr_zyysNum(item, index);
+  });
+};
+//资源要素(渲染地块)
 
+const Xr_zyysNum = (polygon, indexx) => {
+  console.log(4444444, ...polygon.center);
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    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";
+    div.style.MozUserSelect = "none";
+    div.style.display = "flex";
+    div.style.justifyContent = "space-between";
+    div.style.alignItems = "center";
+    div.style.cursor = "pointer";
+    div.style.padding = "5px";
+    div.style.minWidth = "60px";
+    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
+    div.style.transform = "translateY(50px)";
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "10px";
+    title.style.fontWeight = "600";
+    title.style.color = "#000000";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+    content.appendChild(div);
+
+    var number = document.createElement("div");
+    number.style.fontSize = "10px";
+    number.style.fontWeight = "600";
+    number.style.color = "black";
+    div.appendChild(number);
+    number.appendChild(document.createTextNode(this.properties.number));
+    content.appendChild(div);
+    let img2 = document.createElement("img");
+    img2.style.width = "20px";
+    img2.style.height = "26px";
+    img2.src = this.properties.imgSrc2;
+    content.appendChild(div);
+    content.appendChild(img2);
+    return content;
+  }
+  zyys_center.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetX: 10,
+    offsetY: -15,
+    properties: {
+      title: polygon.name,
+      number: polygon.num,
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(zyys_center.value[indexx]);
+
+  zyys_center.value[indexx].addEventListener("click", () => {
+    console.log(polygon.name);
+    // cfCsZs.value = polygon.name;
+    // open_detail();
+  });
+};
 //获取摄像头地址
 const getCameraUrl = () => {
   // camera.deviceCode = dataMyTag.camera.sbbm;
@@ -3691,7 +3857,7 @@ const addPolygonCounty = () => {
         if (item.name == cfJd.value) {
         } else {
           if (yaosuList.value.length != 0) {
-            return
+            return;
           }
           loadingss.value = true;
           clear();
@@ -3906,7 +4072,6 @@ const loadCs = async (name) => {
       });
     }
   }
-  console.log(6666);
 };
 //添加村社区块
 const addPolygonCountyCs = () => {

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        // target: "http://10.0.0.7:8095/", //刘进
+        target: "http://10.0.0.7:8095/", //刘进
-        target: "https://jzzf.longyou.gov.cn:998/", //线上
+        // target: "https://jzzf.longyou.gov.cn:998/", //线上
         // target: "http://220.191.238.50:996/", //线上
         // target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上
         changeOrigin: true, //是否支持跨域