gx

src/view/analyze.vue

@@ -50,7 +50,7 @@
     </div>
     <div class="displayFlex center_bg">
       <div class="flex1">
-        <div class="yd_title center_0">
+        <div class="yd_title center_0" @click="chooseXX('交通')">
           <div class="animate-border">
             <i></i>
             <i></i>

src/view/dialog/dialogMap.vue

@@ -45,7 +45,8 @@
           </div>
         </div>
         <div style="width: 100%; height: 600px">
-         <Map style="width:100%;height:100%;"></Map>
+         <Map style="width:100%;height:100%;" v-if="data.title=='交通'" :center="[119.178783, 29.034583]"></Map>
+         <Map2 style="width:100%;height:100%;" v-if="data.title=='养老机构'" :center="[119.116203, 29.078722]"></Map2>
         </div>
       </div>
     </el-dialog>
@@ -63,7 +64,7 @@ import {
 } from "vue";
 import { CircleCloseFilled } from "@element-plus/icons-vue";
 import Map from "../echart_analyze/map.vue";
-
+import Map2 from "./echarts/map.vue";
 const props = defineProps({
   dialogShowMap: {
     type: Boolean,
@@ -77,24 +78,6 @@ const props = defineProps({
       return "";
     },
   },
-  list1: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  list2: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  year: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
 });
 const emit = defineEmits(["close"]);
 
@@ -117,29 +100,14 @@ watch(
   }
 );
 watch(
-  () => props.list1,
+  () => props.title,
   (newVal, oldVal) => {
-    data.list1 = newVal;
+    data.title = newVal;
-  }
-);
-watch(
-  () => props.list2,
-  (newVal, oldVal) => {
-    data.list2 = newVal;
-  }
-);
-watch(
-  () => props.year,
-  (newVal, oldVal) => {
-    data.year = newVal;
   }
 );
 // 使用生命钩子
 onMounted(() => {
   data.title = props.title;
-  data.list1 = props.list1;
-  data.list2 = props.list2;
-  data.year = props.year;
 });
 
 const closeDialog = () => {

src/view/dialog/dialogMap2.vue

@@ -0,0 +1,225 @@
+
+<template>
+  <div class="dialogPage">
+    <el-dialog
+      v-model="dialogShowMap"
+      width="80vw"
+      :show-close="false"
+      center
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div class="my-header">
+          <el-icon
+            size="26"
+            color="#fff"
+            @click="closeDialog"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </div>
+      </template>
+
+      <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img
+                src="@/assets/images/table_l.png"
+                alt=""
+                style="margin-right: 10px"
+              />
+              <div class="name">{{ title }}详情</div>
+              <img
+                src="@/assets/images/table_r.png"
+                alt=""
+                style="margin-left: 10px"
+              />
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
+        <div style="width: 100%; height: 600px">
+         <Map2 style="width:100%;height:100%;" ></Map2>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+import Map from "../echart_analyze/map.vue";
+import Map2 from "./echarts/map.vue";
+const props = defineProps({
+  dialogShowMap: {
+    type: Boolean,
+    default: () => {
+      return false;
+    },
+  },
+  title: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+const emit = defineEmits(["close"]);
+
+// 详情弹框
+const dialogShowMap = ref();
+const data = reactive({
+  title: "",
+  list1: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+// 监听
+watch(
+  () => props.dialogShowMap,
+  (newVal, oldVal) => {
+    dialogShowMap.value = newVal;
+  }
+);
+watch(
+  () => props.title,
+  (newVal, oldVal) => {
+    data.title = newVal;
+  }
+);
+// 使用生命钩子
+onMounted(() => {
+  data.title = props.title;
+});
+
+const closeDialog = () => {
+  dialogShowMap.value = false;
+  emit("close");
+};
+
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  --el-dialog-bg-color: none;
+  --el-dialog-width: 70% !important;
+}
+
+.my-header {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.tabelPart {
+  padding: 16px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+
+  :deep(.el-pagination button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+</style>

src/view/dialog/echarts/map.vue

@@ -0,0 +1,258 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, nextTick, ref, defineProps, watch } from "vue";
+// import mapTown from '@/assets/json/330225.json'
+import m1 from "@/assets/images/map/m1.png";
+import m2 from "@/assets/images/map/m2.png";
+const props = defineProps({
+  center: {
+    type: Array,
+    default: () => {
+      return [119.116203, 29.078722];
+    },
+  },
+});
+let map = null;
+// 点位
+const mapTownCount = reactive([
+  {
+    name: "龙游县湖镇镇养老服务中心（龙游县湖镇中心敬老院）",
+    value: 34,
+    center: [119.290573, 29.05917],
+  },
+  {
+    name: "龙游县模环敬老院（龙游县模环乡钱江缘颐养院）",
+    value: 73,
+    center: [119.245178, 29.11824],
+  },
+  {
+    name: "龙游县小南海敬老院(龙游县小南海销钱江缘颐养院）",
+    value: 29,
+    center: [119.116203, 29.078722],
+  },
+  {
+    name: "龙游县广和长青养老服务中心",
+    value: 310,
+    center: [119.15457, 29.01811],
+  },
+  {
+    name: "龙游县泽随敬老院(龙游泽随养老中心)",
+    value: 57,
+    center: [119.102493, 29.14036],
+  },
+  {
+    name: "龙游县龙南中心敬老院(龙游龙南养老中心)",
+    value: 73,
+    center: [119.157143, 28.833012],
+  },
+  {
+    name: "龙游县詹家敬老院(龙游詹家养老中心)",
+    value: 33,
+    center: [119.078972, 29.026592],
+  },
+  {
+    name: "龙游县龙洲敬老院(龙游龙洲养老中心)",
+    value: 23,
+    center: [119.164062, 28.984661],
+  },
+  {
+    name: "龙游县横山镇敬老院(龙游横山养老中心)",
+    value: 58,
+    center: [119.237015, 29.240862],
+  },
+  {
+    name: "龙游骨科医院(六顺颐养院)",
+    value: 247,
+    center: [119.171921, 29.01895],
+  },
+  {
+    name: "龙游石佛敬老院(龙游县石佛乡六顺养老中心)",
+    value: 61,
+    center: [119.11557, 29.187431],
+  },
+  {
+    name: "龙游县国华养老服务有限公司",
+    value: 25,
+    center: [119.125282, 29.098713],
+  },
+  {
+    name: "龙游县社会养老和儿童福利院",
+    value: 0,
+    center: [119.17602, 29.03358],
+  },
+  {
+    name: "龙游荷庄养老院",
+    value: 0,
+    center: [119.211021, 29.174171],
+  },
+  {
+    name: "龙游县湖镇中心卫生院(天禾康养)",
+    value: 0,
+    center: [119.299393, 29.059999],
+  },
+]);
+// 初始化
+const mapTownData = reactive([]);
+const initMap = () => {
+  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 16 });
+  map.enableScrollWheelZoom(true);
+  map.setMapStyleV2({
+    styleId: "d0acde891abd157741b71e12670ee2e6",
+  });
+
+  goMapCenter([119.116203, 29.078722], 12);
+  loadTown();
+  addPolygonCounty();
+};
+
+//地图中点
+const goMapCenter = (point, zoom) => {
+  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
+};
+const loadTown = () => {
+  for (let u of mapTownCount) {
+    mapTownData.push({
+      name: u.name,
+      center: u.center,
+      value: u.value,
+    });
+  }
+};
+
+//添加地图区块
+const addPolygonCounty = () => {
+  map.clearOverlays();
+  let fillColor = "#fff";
+  let arr = [];
+  mapTownData.map((item) => {
+    //地区的坐标范围
+    // let points = []
+    //设置图标icon和文字label的偏移量
+    // let iconX = 0,
+    //   iconY = 0,
+    //   labelX = -16,
+    //   labelY = -40
+    // item.point.map((p) => points.push(new BMapGL.Point(...p)))
+    // if (points.length) {
+    //创建面
+    // let polygon = new BMapGL.Polygon(points, {
+    //   strokeColor: '#395548',
+    //   strokeWeight: 2,
+    //   strokeOpacity: 0.8,
+    //   fillColor: fillColor,
+    //   fillOpacity: 0.5,
+    //   name: item.name
+    // })
+    //相同乡镇名称，图标和名称只创建1次
+    if (!arr.find((v) => v == item.name)) {
+      arr.push(item.name);
+      createCustomOverlay(item);
+    }
+    // map.addOverlay(polygon)
+    // }
+  });
+};
+
+// 添加地图上的图标
+const createCustomOverlay = (polygon) => {
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
+
+    var div = document.createElement("div");
+    div.style.color = "#333";
+    div.style.padding = "6px 8px";
+    div.style.whiteSpace = "nowrap";
+    div.style.MozUserSelect = "none";
+    div.style.fontSize = "12px";
+    div.style.borderRadius = "10px";
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.alignItems = "center";
+    div.style.background =
+      "url(/src/assets/img/Distribution/b1.png) no-repeat 0/100% 100%";
+    div.style.cursor = "pointer";
+    div.setAttribute("name", this.properties.title);
+
+    let img = document.createElement("img");
+    img.style.width = "32px";
+    img.src = this.properties.imgSrc;
+    div.appendChild(img);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "14px";
+    title.style.fontWeight = "700";
+    title.style.marginLeft = "4px";
+    title.style.color = "#ddd";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+
+    var num = document.createElement("span");
+    num.style.color = "#30B9FD";
+    num.style.fontSize = "16px";
+    num.style.fontWeight = "700";
+    num.style.marginLeft = "10px";
+    div.appendChild(num);
+    num.appendChild(document.createTextNode(this.properties.text));
+
+    var unit = document.createElement("span");
+    unit.style.color = "#ddd";
+    unit.style.fontSize = "14px";
+    unit.style.marginLeft = "4px";
+    div.appendChild(unit);
+    unit.appendChild(document.createTextNode(this.properties.unit));
+
+    let img2 = document.createElement("img");
+    img2.style.width = "60px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+
+    // div.onclick = function () {
+    //   addPolygonTown(this.getAttribute('name'))
+    //   removeCustomOverlay()
+    //   addStage(this.getAttribute('name'))
+    //   state.mapStatus = 1
+    // }
+
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: -10,
+    properties: {
+      title: polygon.name,
+      text: polygon.value,
+      imgSrc: m1,
+      unit: "人",
+      imgSrc2: m2,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
+};
+watch(
+  () => props.center,
+  (newVal) => {
+    goMapCenter(newVal, 12);
+  }
+);
+onMounted(() => {
+  initMap();
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .anchorBL {
+  display: none;
+}
+</style>
+

src/view/echart_analyze/map.vue

@@ -9,27 +9,45 @@ import {
   onBeforeMount,
   onBeforeUnmount,
   computed,
+  defineProps,
+  watch,
 } from "vue";
-var map = null
+const props = defineProps({
+  center: {
+    type: Array,
+    default: () => {
+      return [119.178783, 29.034583];
+    },
+  },
+});
+var map = null;
 const initMap = () => {
-  map = new BMapGL.Map('map', { minZoom: 11, maxZoom: 20 })
+  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
-  map.enableScrollWheelZoom(true)
+  map.enableScrollWheelZoom(true);
   map.setMapStyleV2({
-    styleId: 'd0acde891abd157741b71e12670ee2e6'
+    styleId: "d0acde891abd157741b71e12670ee2e6",
-  })
+  });
-  goMapCenter([119.178783,29.034583], 15)
+  goMapCenter(props.center, 15);
-}
+};
 
 //地图中点
 const goMapCenter = (point, zoom) => {
-  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom)
+  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
-}
+};
+watch(
+  () => props.center,
+  (newVal) => {
+    console.log(newVal);
+    goMapCenter(newVal, 15);
+  }
+);
 onMounted(() => {
-  initMap()
+  
-})
+  initMap();
+});
 </script>
 <style lang="scss" scoped>
-::v-deep  .anchorBL{
+::v-deep .anchorBL {
-    display:none;
+  display: none;
-  }
+}
 </style>

src/view/yl.vue

@@ -219,7 +219,7 @@
         <div class="history">
           <div
             class="history1"
-            @click="showDialog('养老机构', '/api/ggfwyth/yljghmcList')"
+            @click="showMapDialog('养老机构')"
           >
             <div>
               <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
@@ -313,6 +313,8 @@
         <div v-else-if="currentData.itimetype == '2'">晚餐</div>
       </template>
     </Dialog>
+        <DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
+    </DialogMap>
   </div>
 </template>
 
@@ -329,6 +331,7 @@ import ylJHSY from "./echarts_yl/ylJHSY.vue";
 import ylSMFW from "./echarts_yl/ylSMFW.vue";
 import ylXZZC from "./echarts_yl/ylXZZC.vue";
 import Dialog from "./dialog/dialog.vue";
+import DialogMap from "./dialog/dialogMap.vue";
 import { ref, onMounted, onBeforeMount, reactive, computed } from "vue";
 import http from "@/utils/request.js";
 const leftchoose = ref({
@@ -339,6 +342,8 @@ const leftchoose = ref({
 const showEchart = ref(false);
 // 详情弹框
 const dialogShow = ref(false);
+const dialogShowMap = ref(false);
+const mapTitle = ref("");
 const tableType = reactive({
   url: "",
   title: "",
@@ -439,6 +444,11 @@ const showDialog = (title, url, coulumn) => {
 
   getTable(url, pagination.currentPage);
 };
+//养老机构地图
+const showMapDialog =(title)=>{
+  mapTitle.value = title;
+  dialogShowMap.value = true;
+}
 //获取表格数据
 const getTable = (url, currentPage) => {
   http
@@ -453,6 +463,7 @@ const getTable = (url, currentPage) => {
 };
 const close = () => {
   dialogShow.value = false;
+  dialogShowMap.value = false;
   pagination.currentPage = 1;
   pagination.total = 100;
 };