Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/home.vue

@@ -31,7 +31,6 @@ const reset_font = () => {
   let height =
     document.documentElement.clientHeight || document.body.clientHeight;
 
-  console.log(width, height)
 
   document.querySelector("#m").style.transformOrigin = "top left";
   document.querySelector("#m").style.transform =
@@ -54,11 +53,9 @@ const reset_font = () => {
 };
 onMounted(() => {
   reset_font();
-  reset_font();
 });
 window.addEventListener("resize", function () {
   reset_font();
-  reset_font();
 });
 </script>
 

src/view/sy_map.vue

@@ -5,19 +5,16 @@
       <div class="left" style="width: 517px">
         <div class="lyx">
           <div class="title">
-            <div class="title_name">{{ title_choose }}</div>
+            <div class="title_name">
+              <span @click="csh()">龙游县</span>{{ title_choose }}
+            </div>
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div
+            <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
-              class="content_item"
+              @click="getData(item.id, item.age)" :key="index">
-              v-for="(item, index) in personTotal"
+              <div class="content_item_name">{{ item.ages }}</div>
-              :class="{ choose: item.id == choose.person }"
+              <div class="content_item_value">{{ item.rksl }}</div>
-              @click="changeRs(item.id)"
-              :key="index"
-            >
-              <div class="content_item_name">{{ item.name }}</div>
-              <div class="content_item_value">{{ item.value }}</div>
             </div>
           </div>
         </div>
@@ -27,13 +24,8 @@
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div
+            <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
-              class="content_item"
+              @click="changebq(item.id)" :key="index">
-              v-for="(item, index) in tsbqTotal"
-              :class="{ choose: item.id == choose.bq }"
-              @click="changebq(item.id)"
-              :key="index"
-            >
               <div class="content_item_name">{{ item.name }}</div>
               <div class="content_item_value">{{ item.value }}</div>
             </div>
@@ -47,19 +39,11 @@
             <div class="title_line"></div>
           </div>
           <div class="jbggfwq_content">
-            <div
+            <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
-              class="jbggfwq_content_item"
-              v-for="(item, index) in jbfwqTotal"
-              :key="index"
-            >
               <div class="jbggfwq_content_item_left">{{ item.name }}</div>
               <div class="jbggfwq_content_item_right">
-                <div
+                <div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
-                  class="jbggfwq_content_item_right_item"
+                  :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
-                  v-for="itemm in item.child"
-                  :class="{ choose: itemm.id == choose.fwq }"
-                  @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)"
-                >
                   {{ itemm.name }}
                 </div>
               </div>
@@ -72,13 +56,8 @@
             <div class="title_line"></div>
           </div>
           <div class="zyys_content">
-            <div
+            <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
-              class="zyys_content_item"
+              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
-              v-for="(item, index) in yaosuTotal"
-              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
-              @click="changeys(item.id)"
-              :key="index"
-            >
               <img :src="item.img" class="zyys_content_item_left" />
               <div class="zyys_content_item_right">{{ item.name }}</div>
             </div>
@@ -129,7 +108,7 @@ import b4 from "@/assets/images/map/b4.png";
 import b5 from "@/assets/images/map/b5.png";
 import b6 from "@/assets/images/map/b6.png";
 import xcbg from "@/assets/images/map/xcbg.png";
-
+import http from "@/utils/request.js";
 import AED from "@/assets/images/map/AED.png";
 //删除
 const jdm_arr = ref([]);
@@ -138,8 +117,12 @@ const fwq_list_arr = 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 title_choose = ref("龙游县");
+const cfjiedao = ref("");
+const jrcs = ref(false);
+const title_choose = ref("");
 //村社颜色列表
 const colorList = [
   {
@@ -170,6 +153,30 @@ const colorList = [
     bg: "RGBA(27, 91, 55, 1)",
   },
 ];
+//点击龙游县初始化
+const csh = () => {
+  title_choose.value = "";
+  cfjiedao.value='';
+  cs_un_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_un_choose_arr.value[index]);
+  });
+  cs_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_choose_arr.value[index]);
+  });
+  cs_number_name_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_number_name_arr.value[index]);
+  });
+  cs_name_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_name_arr.value[index]);
+  });
+  cs_qk_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_qk_arr.value[index]);
+  });
+  goMapCenter([119.178783, 29.034583], 11);
+};
+//选中社区
+const chooseCsList = ref([]);
+const unChooseList = ref([]);
 //中心点坐标
 const center_now = ref([]);
 const center_center = ref([119.178783, 29.034583]);
@@ -179,6 +186,7 @@ const mapTownCount = reactive([
     name: "龙洲街道",
     center: [119.1573083, 28.9799445],
     number: "1000",
+
   },
   {
     name: "东华街道",
@@ -435,8 +443,22 @@ const addPolygonCounty = () => {
       map.addOverlay(polygon);
       polygon.addEventListener("click", () => {
         console.log(item.name);
-        if (title_choose.value.includes("溪口镇")) {
+
+        // if(item.name !== "溪口镇"){
+        //   jrcs.value=false;
+        //   console.log( jrcs.value,'000');
+        // }
+        // if (jrcs.value && item.name != "溪口镇") {
+        //   console.log(1);
+        // } else {
+        //   console.log(2);
+
+        // jrcs.value=true;
+        if (item.name == cfjiedao.value) {
+          console.log(2222);
         } else {
+          console.log(111);
+          cfjiedao.value = item.name;
           let jdCenter = [];
           if (item.name == "溪口镇") {
             if (!title_choose.value.includes("溪口镇")) {
@@ -449,18 +471,27 @@ const addPolygonCounty = () => {
                 jdCenter = item.center;
               }
             });
+            console.log(jrcs.value);
             addCs();
             goMapCenter(jdCenter, 13);
           } else {
-            title_choose.value = "龙游县";
+            title_choose.value = "";
             cs_qk_arr.value.forEach((item, index) => {
               map.removeOverlay(cs_qk_arr.value[index]);
             });
             cs_name_arr.value.forEach((item, index) => {
               map.removeOverlay(cs_name_arr.value[index]);
             });
+            cs_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_choose_arr.value[index]);
+            });
+            cs_un_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_un_choose_arr.value[index]);
+            });
           }
         }
+
+        // }
       });
     }
   });
@@ -469,6 +500,7 @@ const addPolygonCounty = () => {
 
 const addJd = () => {
   mapTownCount.map((item, index) => {
+    goMapCenter([119.178783, 29.034581], 11);
     createCustomOverlayJd(item, index);
   });
 };
@@ -524,30 +556,94 @@ const addPolygonCountyCs = () => {
       });
       map.addOverlay(cs_qk_arr.value[index]);
       cs_qk_arr.value[index].addEventListener("click", () => {
-        console.log(111);
+        console.log(item.name);
-        // let jdCenter = [];
+        console.log(111, xkzDk);
-        // if (item.name == "溪口镇") {
+        chooseCsList.value.length = 0;
-        //   if (!title_choose.value.includes("溪口镇")) {
+        unChooseList.value.length = 0;
-        //     title_choose.value = title_choose.value + `>${item.name}`;
+        xkzDk.forEach((itemm, indexx) => {
-        //   }
+          if (itemm.name == item.name) {
-        //   loadCs();
+            chooseCsList.value.push(itemm);
-        //   addPolygonCountyCs();
+          } else {
-        //   mapTownCount.map((item) => {
+            unChooseList.value.push(itemm);
-        //     if (item.name == "溪口镇") {
+          }
-        //       jdCenter = item.center;
+        });
-        //     }
+        title_choose.value = title_choose.value + `>${item.name}`;
-        //   });
+        cs_qk_arr.value.forEach((item, index) => {
-        //   addCs();
+          map.removeOverlay(cs_qk_arr.value[index]);
-        //   goMapCenter(jdCenter, 13);
+        });
-        // } else {
+        console.log("chooseCsList.value", chooseCsList.value);
-        //   title_choose.value = "龙游县";
+        console.log("unChooseList.value", unChooseList.value);
-        //   cs_qk_arr.value.forEach((item, index) => {
+        addCsChoose();
-        //     map.removeOverlay(cs_qk_arr.value[index]);
+        addCsUnChoose();
-        //   });
+      });
-        //   cs_name_arr.value.forEach((item, index) => {
+    }
-        //     map.removeOverlay(cs_name_arr.value[index]);
+  });
-        //   });
+};
-        // }
+//添加选中社区
+const addCsChoose = () => {
+  chooseCsList.value.map((item, index) => {
+    console.log("item", item);
+    let fillColor = "blue";
+    //地区的坐标范围
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: fillColor,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.4,
+        name: item.name,
+        zIndex: 99,
+      });
+      map.addOverlay(cs_choose_arr.value[index]);
+    }
+  });
+};
+//添加未选中社区
+const addCsUnChoose = () => {
+  unChooseList.value.map((item, index) => {
+    let fillColor = "RGBA(125, 140, 154, 1)";
+    //地区的坐标范围
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: fillColor,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.5,
+        name: item.name,
+        zIndex: 99,
+      });
+      map.addOverlay(cs_un_choose_arr.value[index]);
+      cs_un_choose_arr.value[index].addEventListener("click", () => {
+        cs_un_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_un_choose_arr.value[index]);
+        });
+        cs_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_choose_arr.value[index]);
+        });
+        title_choose.value = title_choose.value.slice(0, -4);
+        chooseCsList.value.length = 0;
+        unChooseList.value.length = 0;
+        xkzDk.forEach((itemm, indexx) => {
+          if (itemm.name == item.name) {
+            chooseCsList.value.push(itemm);
+          } else {
+            unChooseList.value.push(itemm);
+          }
+        });
+        title_choose.value = title_choose.value + `>${item.name}`;
+        cs_un_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_qk_arr.value[index]);
+        });
+        addCsChoose();
+        addCsUnChoose();
       });
     }
   });
@@ -1053,71 +1149,101 @@ const personTotal = ref([
     id: 0,
     name: "总人口",
     value: "1724114",
+    ages: '总人口',
+    age: '1000'
+
   },
   {
     id: 1,
-    name: "1岁",
+    name: "0岁",
     value: "26737",
+    ages: '0岁',
+    age: '1000'
   },
   {
     id: 2,
-    name: "2岁",
+    name: "1岁",
     value: "26737",
+    ages: '1岁',
+    age: '1000'
   },
   {
     id: 3,
-    name: "3岁",
+    name: "2岁",
     value: "26737",
+    ages: '2岁',
+    age: '1000'
   },
   {
     id: 4,
-    name: "4岁",
+    name: "3岁",
     value: "26737",
+    ages: '3岁',
+    age: '1000'
   },
+
   {
     id: 5,
-    name: "5岁",
+    name: "4岁",
     value: "26737",
+    ages: '4岁',
+    age: '1000'
   },
   {
     id: 6,
-    name: "6岁",
+    name: "5岁",
     value: "26737",
+    ages: '5岁',
+    age: '1000'
   },
   {
     id: 7,
-    name: "7岁",
+    name: "6岁",
     value: "26737",
+    ages: '6岁',
+    age: '1000'
   },
   {
     id: 8,
-    name: "8岁",
+    name: "7岁",
     value: "26737",
+    ages: '7岁',
+    age: '1000'
   },
   {
     id: 9,
-    name: "9岁",
+    name: "8岁",
     value: "26737",
+    ages: '8岁',
+    age: '1000'
   },
   {
     id: 10,
-    name: "10岁",
+    name: "9岁",
     value: "26737",
+    ages: '9岁',
+    age: '1000'
   },
   {
     id: 11,
-    name: "11岁",
+    name: "10岁",
     value: "26737",
+    ages: '10岁',
+    age: '1000'
   },
   {
     id: 12,
-    name: "12岁",
+    name: "11岁",
     value: "26737",
+    ages: '11岁',
+    age: '1000'
   },
   {
     id: 13,
-    name: "13岁",
+    name: "12岁",
     value: "26737",
+    ages: '12岁',
+    age: '1000'
   },
 ]);
 
@@ -1724,8 +1850,63 @@ const yaosuTotal = ref([
     wz: true,
   },
 ]);
+const getData = async (i, e) => {
+  await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ''}`).then((res) => {
+    if (res.code == 200) {
+      personTotal.value = [{
+        id: '0',
+        ages: "总人口",
+        age: '',
+        value: "res.data.total",
+      },]
+      personTotal.value[0].rksl = res.data.total
+      personTotal.value[0].ages = '总人口'
+      res.data.age.forEach((item, index) => {
+        console.log(index);
+        personTotal.value.push({
+          id: index + 1,
+          rksl: item.rksl,
+          age: item.age + '',
+          ages: item.age + '岁'
+        })
+      })
+      res.data.town.map((item) => {
+        mapTownCount.map((items) => {
+          if (item.town == items.name) {
+            items.number = item.rksl
+          }
+        })
+      })
+    }
+  });
+  console.log(mapTownCount, 10001);
+  if (i) {
+    changeRs(i)
+  }
+};
+const reset_font = () => {
+  let width = document.documentElement.clientWidth || document.body.clientWidth;
+  let height =
+    document.documentElement.clientHeight || document.body.clientHeight;
+  document.querySelector(".header_content").style.transformOrigin = "top left";
+  document.querySelector(".header_content").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+  if (
+    document.querySelector(".left")) {
+    document.querySelector(".left").style.transformOrigin = "bottom left";
+    document.querySelector(".left").style.transform =
+      "scale(" + width / 1920 + "," + height / 1080 + ")";
+    document.querySelector(".right").style.transformOrigin = "bottom right";
+    document.querySelector(".right").style.transform =
+      "scale(" + width / 1920 + "," + height / 1080 + ")";
+
+  }
+
+};
 onMounted(() => {
+  reset_font()
   initMap();
+  getData()
 });
 </script>
 <style lang="scss" scoped>
@@ -1753,17 +1934,13 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(
+  background: linear-gradient(270deg,
-      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%
+      rgba(0, 60, 131, 0.74) 100%),
-    ),
+    radial-gradient(128% 99% at 100% 46%,
-    radial-gradient(
-      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%
+      rgba(0, 61, 134, 0.42) 100%);
-    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -1921,17 +2098,13 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(
+  background: linear-gradient(270deg,
-      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%
+      rgba(0, 60, 131, 0.74) 100%),
-    ),
+    radial-gradient(128% 99% at 100% 46%,
-    radial-gradient(
-      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%
+      rgba(0, 61, 134, 0.42) 100%);
-    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -2061,6 +2234,7 @@ onMounted(() => {
 
 .title {
   .title_name {
+    display: flex;
     font-family: YouSheBiaoTiHei;
     font-size: 34px;
     font-weight: 900;
@@ -2073,6 +2247,21 @@ onMounted(() => {
     /* 为了兼容性，添加渐变背景到IE */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    span{
+      display: block;
+          font-family: YouSheBiaoTiHei;
+    font-size: 34px;
+    font-weight: 900;
+    // line-height: 44px;
+    letter-spacing: 4px;
+    margin-bottom: 15px;
+    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
+    /* 使文字没有背景颜色的背景 */
+    background-clip: text;
+    /* 为了兼容性，添加渐变背景到IE */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    }
   }
 
   .title_line {