资源要素

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

@@ -109,7 +109,7 @@
         </div>
       </div>
       <div class="right" style="width: 517px" v-show="!showEdit">
-         <div class="zyys">
+        <div class="zyys">
           <div class="title">
             <div class="title_name"><span> 基本公共服务资源要素</span></div>
           </div>
@@ -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);
@@ -1819,28 +1826,35 @@ const clear = () => {
   xkzDk.length = 0;
 };
 //清空选中年龄及标签(街道级别)
-const clearPerson=()=>{
+const clearPerson = () => {
-  if(choose.value.person){
+  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=()=>{
+const clearyaosu = () => {
-  
+  if (yaosuList.value.length != 0) {
-  if(yaosuList.value.length!=0){
+    yaosuList.value.forEach((name, index) => {
-    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,21 +2852,172 @@ 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(
-    switch (name) {
+    "click",
-      case "摄像头":
+    async () => {
-        sxtShow.deviceCode = polygon.sbbm;
+      switch (name) {
-        sxtShow.name = polygon.sbmc;
+        case "摄像头":
-        getCameraUrl();
+          sxtShow.deviceCode = polygon.sbbm;
-        break;
+          sxtShow.name = polygon.sbmc;
-      case "AED":
+          getCameraUrl();
-        break;
+          break;
-      default:
+        case "AED":
-        break;
+          break;
+        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;
@@ -3690,8 +3856,8 @@ const addPolygonCounty = () => {
         // townName.value = item.name;
         if (item.name == cfJd.value) {
         } else {
-          if(yaosuList.value.length!=0){
+          if (yaosuList.value.length != 0) {
-            return
+            return;
           }
           loadingss.value = true;
           clear();
@@ -3906,7 +4072,6 @@ const loadCs = async (name) => {
       });
     }
   }
-  console.log(6666);
 };
 //添加村社区块
 const addPolygonCountyCs = () => {
@@ -4722,7 +4887,7 @@ onMounted(async () => {
   overflow: hidden;
   transition: opacity 1s;
   .jbggfwq {
-  margin-top: 20px;
+    margin-top: 20px;
     .jbggfwq_content {
       height: 540px;
       overflow: auto;

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, //是否支持跨域