update

src/App.vue

@@ -7,7 +7,7 @@
   import MiniMap from '/@/components/basic/miniMap.vue';
   import FloorplanView from '/@/components/basic/floorplan.vue';
   import { useSceneStore } from '/@/store/modules/scene';
-  import type { FloorsType, tagType } from '/@/store/modules/scene';
+  import type { FloorsType } from '/@/store/modules/scene';
   import { useAppStore } from './store/modules/app';
   import Guideline from '/@/components/basic/guide.vue';
   import ChatRoom from '/@/components/chatRoom/index.vue';
@@ -278,19 +278,22 @@
     appStore.unLoad();
   });
 
-  const handleSyncTags = (tag: null | tagType) => {
+  const handleSyncTags = () => {
     const { socket } = useSocket();
     const sceneStore = useSceneStore();
-    console.log('handleSyncTags', tag);
+    const tag = computed(() => sceneStore.currentTag);
+    const currentTagLayerIndex = computed(() => sceneStore.currentTagLayerIndex);
+    // console.log('handleSyncTags', tag);
     if (rtcStore.isLeader) {
       if (socket) {
-        console.log('同步tag-', tag?.sid, sceneStore.showCurrentTagLayer);
+        console.log('同步tag-', unref(tag)?.sid, sceneStore.showCurrentTagLayer);
         socket.emit('action', {
           type: 'sync-tag',
           data: {
             roomId: rtcStore.roomId,
-            id: tag?.sid || null,
+            id: unref(tag)?.sid || null,
             showCurrentTagLayer: sceneStore.showCurrentTagLayer,
+            currentTagLayerIndex: currentTagLayerIndex.value,
           },
         });
       }

src/components/chatRoom/controls/actions.ts

@@ -563,6 +563,12 @@ const handleSyncTag = (data) => {
     if ('showCurrentTagLayer' in data && data?.id) {
       sceneStore.setCurrentTagLayer(data.showCurrentTagLayer);
     }
+    if ('currentTagLayerIndex' in data && data?.id) {
+      sceneStore.setCurrentTagLayerIndex(data.currentTagLayerIndex);
+      if ('globalSwiper' in window) {
+        (window as any).globalSwiper.slideTo(data.currentTagLayerIndex);
+      }
+    }
   }
 
   console.log('data', data);

src/components/hotspot/index.vue

@@ -44,23 +44,23 @@
   </teleport>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, nextTick, unref, watch, watchEffect } from 'vue';
+  import { ref, onMounted, nextTick, unref, watchEffect } from 'vue';
   import { useSceneStore, tagType } from '/@/store/modules/scene';
   import { computed } from 'vue';
   import { getApp, useApp } from '/@/hooks/userApp';
   import browser from '/@/utils/browser';
   import TagView from './tag-view.vue';
-  // import { getApp, useApp } from '@/app';
-  // import { useStore } from 'vuex';
   import { changeUrl } from './common';
 
   import ShowTag from './show-tag.vue';
 
   import { ComputedRef } from 'vue';
+  import { watch } from 'vue';
   const sceneStore = useSceneStore();
   const tags$ = ref('');
   const tags = computed(() => sceneStore.tags);
   const currentTag: ComputedRef<tagType | null> = computed(() => sceneStore.currentTag);
+  const currentTagLayerIndex = computed(() => sceneStore.currentTagLayerIndex);
   const isClick = ref(false);
   const showLayer = computed(() => sceneStore.currentTagLayer);
   const emit = defineEmits(['setCurrentTag']);
@@ -74,30 +74,32 @@
 
   const openLayer = (tag: tagType) => {
     // showLayer.value = true;
+    sceneStore.setCurrentTag(tag);
     sceneStore.setCurrentTagLayer(true);
     // currentTag.value = tag;
-    emit('setCurrentTag', tag);
-    sceneStore.setCurrentTag(tag);
+    emit('setCurrentTag');
     console.error('open-layer');
   };
   const closeLayer = () => {
-    // showLayer.value = false;
     sceneStore.setCurrentTagLayer(false);
-    // currentTag.value = null;
-    emit('setCurrentTag', null);
+
     sceneStore.setCurrentTag(null);
+    emit('setCurrentTag');
     console.error('close-layer');
+    if (unref(isMobile)) {
+      isClick.value = false;
+    }
   };
 
   const closeTag = async () => {
     // currentTag.value = null;
-    emit('setCurrentTag', null);
     sceneStore.setCurrentTag(null);
+    sceneStore.setCurrentTagLayer(false);
     isClick.value = false;
+    emit('setCurrentTag');
   };
   const goTag = (_, item: tagType) => {
     console.warn('gototag', item.sid);
-    emit('setCurrentTag', item);
     // showLayer.value = false;
     sceneStore.setCurrentTagLayer(false);
     if (unref(isClick)) {
@@ -107,13 +109,10 @@
     } else {
       // currentTag.value = item;
       sceneStore.setCurrentTag(item);
+
       isClick.value = true;
-      try {
-        // focusTag(item);
-      } catch (error) {
-        console.log('error', error);
-      }
     }
+    emit('setCurrentTag');
   };
   const onMouseLeave = (_, tag: tagType) => {
     if (
@@ -122,14 +121,17 @@
       currentTag.value?.sid === tag.sid &&
       !unref(showLayer)
     ) {
-      // currentTag.value = null;
       sceneStore.setCurrentTag(null);
+      emit('setCurrentTag');
     }
   };
   const onMouseEnter = (_, tag: tagType) => {
     if (!unref(isMobile)) {
+      if (unref(isClick) && currentTag.value?.sid !== tag.sid) {
+        isClick.value = false;
+      }
       sceneStore.setCurrentTag(tag);
-      // currentTag.value = tag;
+      emit('setCurrentTag');
     }
   };
 
@@ -144,19 +146,20 @@
         app.TagManager.load(tags.value);
         app.TagManager.updatePosition(tags.value);
       }
+      if (currentTag.value) {
+        //用 watch deep由于object prop过多会引起loop
+        if (unref(isMobile)) {
+          focusTag(currentTag.value);
+        }
+      }
+      if (currentTag.value && isClick.value) {
+        //用 watch deep由于object prop过多会引起loop
+        if (!unref(isMobile)) {
+          focusTag(currentTag.value);
+        }
+      }
     });
 
-    watch(
-      currentTag,
-      (val) => {
-        if (val) {
-          focusTag(val);
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
     // app.Camera.on('flying.started', (pano) => {});
     // app.Camera.on('flying.ended', ({ targetPano }) => {});
     await app.TagManager.tag();
@@ -171,6 +174,9 @@
     } else {
       // window.addEventListener('click', onClickHandler)
     }
+    watch(currentTagLayerIndex, () => {
+      emit('setCurrentTag');
+    });
   });
   const getUrl = (icon) => {
     let url =

src/components/hotspot/metas/image-view.vue

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
   import { onMounted, computed, nextTick, defineProps } from 'vue';
-  import { tagType } from '/@/store/modules/scene';
+  import { tagType, useSceneStore } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
 
   const props = defineProps({
@@ -44,7 +44,7 @@
   // const zoomList = [];
   onMounted(() => {
     // let urls = [];
-    new (window as any).Swiper('.mySwiper', {
+    (window as any).globalSwiper = new (window as any).Swiper('.mySwiper', {
       zoom: {
         toggle: false,
         maxRatio: 5,
@@ -68,6 +68,12 @@
         touchStart: function () {
           // console.log(swiper.previousIndex)
         },
+        activeIndexChange: function (swiper) {
+          console.log('event', swiper.activeIndex);
+          const sceneStore = useSceneStore();
+          sceneStore.setCurrentTagLayerIndex(swiper.activeIndex);
+          // console.log(swiper.previousIndex)
+        },
       },
       navigation: {
         nextEl: '.swiper-button-next',

src/components/hotspot/metas/metas-audio.vue

@@ -12,10 +12,6 @@
 
 <script setup>
   import { computed } from 'vue';
-  // import { changeUrl } from '../common';
-  // const store = useStore();
-  // const audioNum = ref(0);
-  // const type = ref('audio');
 
   const audioInfo = computed(() => {
     return hotData.value.media.audio;

src/store/modules/scene.ts

@@ -42,6 +42,7 @@ interface SceneState {
   metadata: KankanMetaDataType;
   currentTag: null | tagType;
   currentTagLayer: boolean;
+  currentTagLayerIndex: number;
 }
 
 export const getStaticURL = (path: string) => {
@@ -56,6 +57,7 @@ export const useSceneStore = defineStore({
     floors: [],
     metadata: {} as KankanMetaDataType,
     currentTagLayer: false,
+    currentTagLayerIndex: 0,
   }),
   getters: {
     musicURL(): Nullable<string> {
@@ -106,10 +108,14 @@ export const useSceneStore = defineStore({
       }
     },
     setCurrentTag(tag: null | tagType): void {
+      console.log('setCurrentTag');
       this.currentTag = tag;
     },
     setCurrentTagLayer(status: boolean): void {
       this.currentTagLayer = status;
     },
+    setCurrentTagLayerIndex(index: number) {
+      this.currentTagLayerIndex = index;
+    },
   },
 });