From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 七月 2024 15:56:51 +0800
Subject: [PATCH] 1

---
 src/pages/characterMap/characterMap.vue |  137 +++++++++++++++++++++++++++++----------------
 1 files changed, 88 insertions(+), 49 deletions(-)

diff --git a/src/pages/characterMap/characterMap.vue b/src/pages/characterMap/characterMap.vue
index e9a18d3..a4f33a5 100644
--- a/src/pages/characterMap/characterMap.vue
+++ b/src/pages/characterMap/characterMap.vue
@@ -1,8 +1,10 @@
 <template>
-  <view>
-    <headNav :idIndex="idIndex" text="涓尰浜虹墿鏁版嵁搴�" />
-    <el-button class="getBack" @click="getBack">杩斿洖</el-button>
-    <view class="" style="position: relative">
+  <view
+    style="width: 100%; height: 100%; display: flex; flex-direction: column"
+  >
+    <headNav :idIndex="1 + ''" text="鍘嗕唬浜虹墿" />
+    <el-button class="getBack" @click="goBack">杩斿洖</el-button>
+    <view style="flex: 1; overflow: hidden">
       <!-- 鍦板浘 -->
       <!-- <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> -->
       <div id="map"></div>
@@ -12,7 +14,7 @@
         <view
           class="font-family"
           style="font-size: 0.26rem; padding-top: 0.16rem; font-weight: bold"
-          >{{ activityInfo.participants }}</view
+          >{{ basicInfo.name }}</view
         >
         <ul
           style="
@@ -23,15 +25,15 @@
             line-height: 0.28rem;
           "
         >
-          <li>鍑虹敓浜巤{ basicInfo.nativePlace }}</li>
+          <li>鍑虹敓浜巤{ basicInfo.nativePlace || "-" }}</li>
           <li>
-            {{
-              basicInfo.birthYear +
-              basicInfo.nativePlace +
-              "(浠�" +
-              basicInfo.nowPlace +
-              ")"
-            }}
+            <span v-if="basicInfo.birthYear">{{ basicInfo.birthYear }}</span>
+            <span v-if="basicInfo.nativePlace">{{
+              basicInfo.nativePlace
+            }}</span>
+            <span v-if="basicInfo.nowPlace"
+              >锛堜粖{{ basicInfo.nowPlace }}锛�</span
+            >
           </li>
         </ul>
         <ul
@@ -42,18 +44,18 @@
             line-height: 0.28rem;
           "
         >
-          <li>娲诲姩鍚嶇О锛歿{ activityInfo.activityName }}</li>
-          <li>娲诲姩鍦扮偣锛歿{ activityInfo.activityAddr }}</li>
-          <li>娲诲姩鍖洪棿锛歿{ activityInfo.time }}</li>
-          <li>娲诲姩鎻忚堪锛歿{ activityInfo.desc }}</li>
-          <li>鍙備笌浜哄憳锛歿{ activityInfo.participants }}</li>
+          <li>娲诲姩鍚嶇О锛歿{ activityInfo.activityName || "-" }}</li>
+          <li>娲诲姩鍦扮偣锛歿{ activityInfo.activityAddr || "-" }}</li>
+          <li>娲诲姩鍖洪棿锛歿{ activityInfo.time || "-" }}</li>
+          <li>娲诲姩鎻忚堪锛歿{ activityInfo.desc || "-" }}</li>
+          <li>鍙備笌浜哄憳锛歿{ activityInfo.participants || "-" }}</li>
         </ul>
         <!-- <img
           style="width: 100%; height: 2rem"
           src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
           alt=""
         /> -->
-        <div class="box" style="width: 80%">
+        <!-- <div class="box" style="width: 80%">
           <span class="span" :style="{ marginLeft: spanML + 'rem' }"
             >{{ span }}骞�</span
           >
@@ -67,7 +69,7 @@
           </div>
           <div class="MX"></div>
           <div class="cursor" :style="{ marginLeft: cursorML + 'rem' }"></div>
-        </div>
+        </div> -->
       </el-dialog>
     </view>
   </view>
@@ -78,6 +80,7 @@
 import "echarts/extension/bmap/bmap";
 import { loadBMap } from "@/static/map.js";
 import L from "leaflet";
+import "leaflet.chinatmsproviders";
 import { getPersonInfo } from "@/api/index.js";
 export default {
   data() {
@@ -94,7 +97,13 @@
       spanML: 0,
       cursorML: -0.05,
       activityInfo: {},
-      basicInfo: {},
+      basicInfo: {
+        name: "",
+        birthYear: "",
+        deathYear: "",
+        nativePlace: "",
+        nowPlace: "",
+      },
     };
   },
 
@@ -107,7 +116,6 @@
     //   this.aaa();
     // });
     this.$route;
-    console.log(this.$route, "this.$route");
     this.getPersonInfoFun();
     this.getBasicInfo();
   },
@@ -123,27 +131,37 @@
       //   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
       // ).addTo(map);
 
-      L.tileLayer(
-        "https://t{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=76bc34ead7e30e663a4eded8aeaf5860",
-        {
+      L.tileLayer
+        .chinaProvider("TianDiTu.Normal.Map", {
+          key: "76bc34ead7e30e663a4eded8aeaf5860",
           maxZoom: 18,
-          attribution: "Map data &copy; 2012-2019, TianDiTu",
-          id: "tdtAnnoLayer",
-          accessToken: "your.mapbox.public.access.token",
-        }
-      ).addTo(map);
+          minZoom: 5,
+        })
+        .addTo(map);
+      L.tileLayer
+        .chinaProvider("TianDiTu.Normal.Annotion", {
+          key: "76bc34ead7e30e663a4eded8aeaf5860",
+          maxZoom: 18,
+          minZoom: 3,
+        })
+        .addTo(map);
       let DefaultIcon1 = L.icon({
         iconUrl: this.icoName,
         iconSize: [24, 41], //  鍥炬爣鐨勫ぇ灏�    銆愬��1锛屽��2銆� 涓哄叿浣撲綘鑷畾涔夊浘鏍囩殑灏哄锛屾瘮濡傛垜鍥炬爣灏哄鏄�32脳52锛岃〃绀鸿鍥炬爣锛氬搴�32鍍忕礌锛岄珮搴︼細52鍍忕礌锛岄偅涔堝��1:灏辨槸32锛屽��2锛氬氨鏄�52
         iconAnchor: [24, 41], //  鍥炬爣灏嗗搴旀爣璁扮偣鐨勪綅缃� 杩欎釜鏄噸鐐癸紝 銆愬��1锛屽��2銆戯紝鍊�1锛氫负鍥炬爣鍧愭爣绗竴涓��(鍗�32)鐨勪竴鍗婏紝鍊�2锛氫负鍥炬爣鍧愭爣绗簩涓��(鍗�52)
         popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗ｉ粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
       });
+      let icon = L.divIcon({
+        html: "<div class='map-circle-name ripple'></div>",
+        iconSize: [80, 80],
+        className: "map-circle",
+      });
       this.map = map;
       if (info && info.length) {
         for (let i = 0; i < info.length; i++) {
           const item = info[i];
           const marker1 = L.marker([item.ycoord, item.xcoord], {
-            icon: DefaultIcon1,
+            icon: icon,
           }).addTo(map);
           marker1.on("click", (e) => {
             this.menuNav = true;
@@ -154,8 +172,8 @@
     },
 
     // 杩斿洖鎸夐挳
-    getBack() {
-      uni.navigateBack();
+    goBack() {
+      this.$router.go(-1);
     },
     aaa() {
       // 娓叉煋姣嶇嚎
@@ -177,7 +195,6 @@
         id: this.$route.query.id,
         type: "PERSON_SPACE_TIME",
       }).then((res) => {
-        console.log(res, "res");
         this.initMap(res.object.personSpaceTimeList);
       });
     },
@@ -187,7 +204,6 @@
         id: this.$route.query.id,
         type: "PERSON_BASIC",
       }).then((res) => {
-        console.log(res, "res");
         this.basicInfo.name = res.object.personFieldList.find(
           (f) => f.fieldName == "WEAK_NAME"
         ).content1;
@@ -203,16 +219,14 @@
         this.basicInfo.nowPlace = res.object.personFieldList.find(
           (f) => f.fieldName == "NATIVE_PLACE"
         ).content2;
-        // this.initMap(res.object.personSpaceTimeList);
+        console.log(this.basicInfo);
       });
     },
 
     creatMX(len) {
-      console.log(len);
       let width = len * 50 + 10;
       // this.MX.style.width = `${width}px`
       // this.scales.style.width = `${width}px`
-      // console.log(this.box.style.width);
     },
     creatScale() {
       // for (let i = 0; i < this.yearArr.length; i++) {
@@ -222,7 +236,6 @@
       // 	scale.addEventListener("click", this.scaleClick)
       // 	scales.appendChild(scale)
       // }
-      // console.log(arr[0]);
     },
 
     handleSliderChange(value) {
@@ -230,16 +243,13 @@
     },
     scaleClick(i) {
       // let i = Number(this.getAttribute("data-index"))
-      console.log(i, this.cursorML);
 
       if (i > this.yearIndex) {
         this.cursorML += (i - this.yearIndex + +("0.0" + this.yearIndex)) / 1.9;
         // this.spanML += 50 * (i - this.yearIndex)
-        console.log(i - this.yearIndex + 0.2, "aaaa");
       } else {
         this.cursorML -= (this.yearIndex - i) / 2 + 0.04;
         // this.spanML -= 50 * (this.yearIndex - i)
-        console.log(this.yearIndex, i, "bbbb");
       }
       this.yearIndex = i;
     },
@@ -455,12 +465,10 @@
       // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
       myChart.on("click", (params) => {
         // menuNav2 = !menuNav1
-        // console.log(menuNav);
         if (params.componentType === "series") {
           var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉�
           var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹��
           // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔
-          // console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue);
           // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫
           this.spaceTimeArr(params);
         }
@@ -473,7 +481,6 @@
       // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅
       this.menuNav = !this.menuNav;
       // 鏃剁┖鍦板浘鐨勬暟鎹�
-      console.log(Arr);
     },
   },
 };
@@ -485,7 +492,7 @@
   width: 0.6rem;
   height: 0.24rem;
   top: 1rem;
-  left: 0.24rem;
+  left: 0.6rem;
   z-index: 99999;
   font-size: 0.12rem;
   display: flex;
@@ -563,9 +570,9 @@
   margin: 0 !important;
   position: absolute;
   right: 0;
-  top: 0;
+  top: 86px;
+  bottom: 0;
   width: 4rem;
-  height: 100%;
 }
 
 .particulars ::v-deep .el-dialog__header {
@@ -579,9 +586,41 @@
   height: 100%;
 }
 #map {
-  height: 1080px;
+  height: 100%;
   width: 100%;
   margin: 0 auto;
   font-size: 14px !important;
 }
+::v-deep .map-circle-name {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: rgb(222, 142, 102);
+}
+
+::v-deep .ripple {
+  border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+::v-deep .ripple::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 150%; /* Ensure it covers the entire parent */
+  height: 150%;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(1);
+  animation: ripple-animation 1s infinite linear;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+}
 </style>

--
Gitblit v1.9.1