fix 标记数据结构调整

hookehuyr
Commit 4e9f97969f774fffa20c6594fcf2bf0d9a780dd9 4e9f9796 1 parent a8612cb4
Showing 4 changed files with 97 additions and 17 deletions
src/components/Floor/index.vue
src/components/Floor/pin.js
src/components/Floor/svgIcon.vue
src/views/inner.vue
--- a/src/components/Floor/index.vue
View file @4e9f979
+++ b/src/components/Floor/index.vue
View file @4e9f979
 <!--
  * @Date: 2023-07-27 11:04:04
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-02 07:17:28
+ * @LastEditTime: 2023-08-04 16:00:11
  * @FilePath: /map-demo/src/components/Floor/index.vue
  * @Description: 文件描述
 -->
@@ -44,7 +44,7 @@
 							:class="['level', 'level--' + (index + 1)]">
 							<div v-html="level.svg"></div>
 							<div class="level__pins">
-								<a v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
+								<a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
 									:data-category="item.category" :data-space="item.space">
 									<span class="pin__icon">
 										<svg class="icon icon--pin">
@@ -69,10 +69,8 @@
 				<van-icon name="cross" size="1.5rem" />
 			</div>
 			<div style="margin: 0 1rem">
-				<div style="font-size: 1.25rem; margin-bottom: 1rem;">大雄宝殿</div>
+				<div style="font-size: 1.25rem; margin-bottom: 1rem;">{{ popup_title }}</div>
-				<div>
+				<div> {{ popup_content }} </div>
-					大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
-				</div>
 			</div>
 		</van-popup>
@@ -109,6 +107,8 @@ export default {
 			show_popup: false,
 			show_search_popup: false,
 			level_list: Data,
+			popup_title: '',
+			popup_content: '',
 			search_list: [
 				{
 					title: '1-客房',
@@ -144,12 +144,6 @@ export default {
 		}
 	},
 	async mounted() {
-		// 绑定选择点后回调
-		$('.level__pins').children('.pin').on('click', (evt) => {
-			this.clearPinShow();
-			$(evt.currentTarget).addClass('pin--active');
-			this.show_popup = true;
-		});
 	},
 	methods: {
 		clearPinShow() {
@@ -224,7 +218,15 @@ export default {
 		onClosePopup() {
 			this.show_popup = false;
 			this.clearPinShow();
-		}
+		},
+		clickPin (item, evt) { // 点击pin操作
+			this.clearPinShow();
+			$(evt.target).parents('a.pin').addClass('pin--active');
+			this.show_popup = true;
+			// 打开 pin 详情信息
+			this.popup_title = item?.affix?.title;
+			this.popup_content = item?.affix?.content;
+		},
 	}
 }
 </script>
--- a/src/components/Floor/pin.js
View file @4e9f979
+++ b/src/components/Floor/pin.js
View file @4e9f979
 /*
  * @Date: 2023-08-01 13:55:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-01 16:12:24
+ * @LastEditTime: 2023-08-04 16:06:07
  * @FilePath: /map-demo/src/components/Floor/pin.js
  * @Description: 文件描述
  */
@@ -336,10 +336,14 @@ const testInfo = [
     pin: [
       {
         id: 'pin--4-1',
-        category: 1,
+        category: 2,
         space: 4.01,
         icon: 'tomato',
         style: { top: '55vmin', left: '21vmin' },
+        affix: {
+          title: '宿舍401',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-2',
@@ -347,6 +351,10 @@ const testInfo = [
         space: 4.02,
         icon: 'cinema',
         style: { top: '18vmin', left: '20vmin' },
+        affix: {
+          title: '宿舍402',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-3',
@@ -354,6 +362,10 @@ const testInfo = [
         space: 4.03,
         icon: 'paint-brush',
         style: { top: '21vmin', left: '88vmin' },
+        affix: {
+          title: '宿舍403',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-4',
@@ -361,6 +373,10 @@ const testInfo = [
         space: 4.04,
         icon: 'modx',
         style: { top: '52vmin', left: '74vmin' },
+        affix: {
+          title: '宿舍404',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-5',
@@ -368,6 +384,10 @@ const testInfo = [
         space: 4.05,
         icon: 'droplet',
         style: { top: '33vmin', left: '38vmin' },
+        affix: {
+          title: '宿舍405',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-6',
@@ -375,6 +395,10 @@ const testInfo = [
         space: 4.06,
         icon: 'cupcake',
         style: { top: '39vmin', left: '56vmin' },
+        affix: {
+          title: '宿舍406',
+          content: '休息室',
+        },
       },
       {
         id: 'pin--4-7',
@@ -382,6 +406,10 @@ const testInfo = [
         space: 4.07,
         icon: 'leafcircle',
         style: { top: '58vmin', left: '10vmin' },
+        affix: {
+          title: '宿舍407',
+          content: '休息室',
+        },
       },
     ],
   },
--- a/src/components/Floor/svgIcon.vue
View file @4e9f979
+++ b/src/components/Floor/svgIcon.vue
View file @4e9f979
--- a/src/views/inner.vue
View file @4e9f979
+++ b/src/views/inner.vue
View file @4e9f979
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-07-31 18:14:27
+ * @LastEditTime: 2023-08-04 15:34:12
  * @FilePath: /map-demo/src/views/inner.vue
  * @Description: 内部地图主体页面
 -->
@@ -277,7 +277,7 @@ export default {
       point_range: [ // 景区范围经纬度
         [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
       ],
-      show_floor_popup: false,
+      show_floor_popup: true,
     }
   },
   async mounted() {
@@ -392,6 +392,10 @@ export default {
         this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
       }, 100);
       this.removeNavRoute();
+      // 测试选择人员后轮询
+      if (id === 'members') {
+        this.testPolling()
+      }
     },
     loadMaker (id) {
       var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
@@ -1197,6 +1201,52 @@ export default {
     },
     onClose () {
       this.show_floor_popup = false;
+    },
+    testPolling () { // 测试轮询
+      let index = 1; // 控制何时停止轮询
+      let timer = 0; // 实现中断轮询
+
+      // syncPromise 模拟异步请求
+      const syncPromise = () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            console.log(`第 ${index} 次请求`);
+            resolve(index < 5 ? true : false); // 当进行 5 次异步请求后，会返回 false 表示拿到数据分析结果，停止数据查询轮询：
+            index++;
+          }, 50);
+        });
+      }
+
+      // pollingPromise 作为 sleep 睡眠函数使用，去控制轮询的间隔时间，并在指定时间执行异步请求
+      const pollingPromise = () => {
+        return new Promise(resolve => {
+          timer = setTimeout(async () => {
+            const result = await syncPromise();
+            resolve(result);
+          }, 1000);
+        });
+      }
+
+      // startPolling 作为开始轮询的入口
+      const startPolling = async () => {
+        // 清除进行中的轮询，重新开启计时轮询
+        clearTimeout(timer); // !!! 注意：清除计时器后，会导致整个 async/await 链路中断，若计时器的位置下方还存在代码，将不会执行。
+        index = 1;
+        // 立刻执行一次异步请求
+        let needPolling = await syncPromise();
+        // 根据异步请求结果，判断是否需要开启计时轮询
+        while (needPolling) {
+          needPolling = await pollingPromise();
+        }
+        console.log('轮询请求处理完成！'); // 若异步请求被 clearTimeout(timer)，这里不会被执行打印输出。
+      }
+
+      const start = async () => {
+        await startPolling();
+        console.log('若异步请求被 clearTimeout(timer)，这里将不会被执行');
+      }
+
+      start();
     }
   }
 }