update

packages/qjkankan-kankan-view/src/components/Tags/index.vue

@@ -1,213 +1,366 @@
 <template>
-    <teleport :to="tags$" v-if="tags$">
-        <template v-for="(tag, index) in tags">
-            <div :tag-sid="tag.sid" @mouseleave="onMouseLeave($event, tag)" :style="{ left: tag.x + 'px', top: tag.y + 'px' }" :class="{ visible: tag.visible }">
-                <span @click.stop="goTag(tag, index)" class="point zoom" @mouseenter.stop="onMouseEnter(tag, index)" :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"></span>
-                <div class="content">
-                    <div class="trans" :class="{ active: (isFixed && hotData && tag.sid == hotData.sid) || (showInfo && hotData && tag.sid == hotData.sid) }">
-                        <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
-                            <div class="arrow" :id="`arrow_${tag.sid}`">
-                                <ui-icon @click.stop="closeTag" v-if="getApp().config.mobile" type="close"></ui-icon>
-                            </div>
-                            <ShowTag @click.stop="" v-if="!isEdit && hotData" @open="openInfo" />
-                        </template>
-                    </div>
-                </div>
-                <TagView @click.stop="" v-if="showMsg && toggleIndex == index" @close="closeInfo" />
-            </div>
-        </template>
-    </teleport>
-</template>
+  <teleport :to="tags$" v-if="tags$">
+    <template v-for="(tag, index) in tags">
+      <!-- <div
+                :tag-sid="tag.sid"
+                @mouseleave.prevent="onMouseLeave($event, tag)"
+                :style="{ left: `${tag.x}px`, top: `${tag.y}px`, 'z-index': hotData?.sid == tag.sid ? 1 : 0 }"
+                :class="{ visible: tag.visible || (tours.length && hotData && tours[partId].list[frameId].tagId == tag.sid && getApp().config.mobile) }"
+            > -->
+      <div
+        :tag-sid="tag.sid"
+        @mouseleave.prevent="onMouseLeave($event, tag)"
+        :style="{
+          transform: `translate3d(${tag.x}px,${tag.y}px,0)`,
+          'z-index': hotData?.sid == tag.sid ? 1 : 0,
+        }"
+        :class="{
+          visible:
+            tag.visible ||
+            (tours.length &&
+              hotData &&
+              tours[partId].list[frameId].tagId == tag.sid &&
+              getApp().config.mobile),
+        }"
+      >
+        <span
+          class="point zoom"
+          @mouseenter.prevent="onMouseEnter($event, tag, index)"
+          @click.stop="goTag($event, tag, index)"
+          :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"
+        ></span>
+        <div class="content">
+          <div
+            class="trans"
+            :class="{
+              fixed: isPlay,
+              active:
+                (isFixed && hotData && tag.sid == hotData.sid) ||
+                (showInfo && hotData && tag.sid == hotData.sid),
+            }"
+          >
+            <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
+              <div class="arrow" :id="`arrow_${tag.sid}`">
+                <ui-icon
+                  @click.stop="closeTag"
+                  v-if="getApp().config.mobile"
+                  type="close"
+                ></ui-icon>
+              </div>
+              <ShowTag
+                @click.stop=""
+                v-if="!isEdit && hotData"
+                @open="openInfo"
+              />
+            </template>
+          </div>
+        </div>
 
+        <TagView
+          @click.stop=""
+          v-if="showMsg && toggleIndex == index"
+          @close="closeInfo"
+        />
+      </div>
+    </template>
+  </teleport>
+</template>
 <script setup>
-import { ref, onMounted, computed, watch, watchEffect, onActivated, onDeactivated, getCurrentInstance, nextTick } from 'vue'
-import { getApp, useApp } from '@/app'
-import { useStore } from 'vuex'
-import common from '../../utils/common'
-import TagView from './tag-view.vue'
-import ShowTag from './show-tag.vue'
-import { useRoute } from 'vue-router'
-import { useMusicPlayer } from '@/utils/sound'
-const musicPlayer = useMusicPlayer()
-let init = true
+import {
+  ref,
+  onMounted,
+  computed,
+  watch,
+  watchEffect,
+  onActivated,
+  onDeactivated,
+  getCurrentInstance,
+  nextTick,
+} from "vue";
+import { getApp, useApp } from "@/app";
+import { useStore } from "vuex";
+import common from "../../utils/common";
+import TagView from "./tag-view.vue";
+import ShowTag from "./show-tag.vue";
+import { useRoute } from "vue-router";
+import { useMusicPlayer } from "@/utils/sound";
+import browser from "@/utils/browser";
+// import { Track, startTrack, endTrack } from "@/utils/track.js";
+const musicPlayer = useMusicPlayer();
+let init = true;
 const hotData = computed(() => {
-    let data = store.getters['tag/hotData']
-    if (!data) {
-        // musicPlayer.play()
-        // musicPlayer.pause(true)
-        // if (!getApp().Scene.isCurrentPanoHasVideo) {
-        //     console.log('resume')
-        //     console.log(init)
-        //     musicPlayer.resume()
-        // }
-    }
-    return data
-})
-const isPlay = computed(() => store.getters['tour/isPlay'])
-const router = computed(() => store.getters['router'])
-const flying = computed(() => store.getters['flying'])
-const leaveId = computed(() => store.getters['tag/leaveId'])
-const isEdit = computed(() => store.getters['tag/isEdit'])
-const isFixed = computed(() => store.getters['tag/isFixed'])
-const enterVisible = computed(() => store.getters['tag/enterVisible'])
-const editPosition = computed(() => store.getters['tag/editPosition'])
-const toggleIndex = computed(() => store.getters['tag/toggleIndex'])
-const isClick = computed(() => store.getters['tag/isClick'])
-const editModule = computed(() => store.getters['editModule'])
-const positionInfo = computed(() => store.getters['tag/positionInfo'])
-const store = useStore()
-const tags$ = ref(null)
+  let data = store.getters["tag/hotData"];
+  if (!data) {
+    // musicPlayer.play()
+    // musicPlayer.pause(true)
+    // if (!getApp().Scene.isCurrentPanoHasVideo) {
+    //     musicPlayer.resume()
+    // }
+  }
+  return data;
+});
+const isPlay = computed(() => store.getters["tour/isPlay"]);
+const tours = computed(() => store.getters["tour/tours"]);
+const partId = computed(() => store.getters["tour/partId"]);
+const frameId = computed(() => store.getters["tour/frameId"]);
+const router = computed(() => store.getters["router"]);
+const flying = computed(() => store.getters["flying"]);
+const leaveId = computed(() => store.getters["tag/leaveId"]);
+const isEdit = computed(() => store.getters["tag/isEdit"]);
+const isFixed = computed(() => store.getters["tag/isFixed"]);
+const enterVisible = computed(() => store.getters["tag/enterVisible"]);
+const editPosition = computed(() => store.getters["tag/editPosition"]);
+const toggleIndex = computed(() => store.getters["tag/toggleIndex"]);
+const isClick = computed(() => store.getters["tag/isClick"]);
+const editModule = computed(() => store.getters["editModule"]);
+const positionInfo = computed(() => store.getters["tag/positionInfo"]);
+const panoId = computed(() => store.getters["panoId"]);
+const store = useStore();
+const tags$ = ref(null);
 const tags = computed(() => {
-    return store.getters['tag/tags'] || []
-})
+  return store.getters["tag/tags"] || [];
+});
+
+// const flyClose = computed(() => store.getters['tag/flyClose'])
 
 watch(
-    () => router.value.name,
-    (val, old) => {
-        // console.log(val)
-        if (val !== 'tag') {
-            store.commit('tag/setFixed', false)
-        }
+  () => router.value.name,
+  (val, old) => {
+    if (val !== "tag") {
+      store.commit("tag/setData", { isFixed: false });
     }
-)
+  }
+);
 
-const showInfo = ref(false)
-const showMsg = ref(false)
+const showInfo = ref(false);
+const showMsg = ref(false);
 // const toggleIndex = ref(null)
 const openInfo = () => {
-    showMsg.value = true
-    store.commit('tag/setFixed', false)
-    showInfo.value = false
-}
+  showMsg.value = true;
+  store.commit("tag/setData", { isFixed: false, isClick: true });
+  showInfo.value = false;
+};
 const closeInfo = () => {
-    showMsg.value = false
-    if (isClick.value) {
-        //只有点击定位的才恢复显示
-        store.commit('tag/show', toggleIndex.value)
-        store.commit('tag/setFixed', true)
-        // showInfo.value = true
-        showInfo.value = false
-    }
-    // store.commit('tag/setClick', false)
-}
+  showMsg.value = false;
+  if (isClick.value) {
+    //只有点击定位的才恢复显示
+    store.commit("tag/show", toggleIndex.value);
+    store.commit("tag/setFixed", true);
+    // showInfo.value = true
+    showInfo.value = false;
+  }
+  // store.commit('tag/setClick', false)
+};
 const closeTag = async () => {
-    const app = getApp()
-    const player = await app.TourManager.player
-    //关闭热点面板时候，继续播放之前暂停的音频
-    if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
-        if ( hotData.value && (hotData.value.type == 'audio' || hotData.value.type == 'video')) {
-            // console.log('resume')
-            window.parent.postMessage(
-            {
-                source: "qjkankan",
-                event: "toggleBgmStatus",
-                params: {
-                    status: true,
-                },
-            },
-            "*"
-        );
-        }
-    }
+  const app = getApp();
+  const player = await app.TourManager.player;
 
-    store.commit('tag/setFixed', false)
-    store.commit('tag/closeTag')
-    store.commit('tag/setClick', false)
-    showInfo.value = false
-}
-const goTag = async (item, index) => {
-    let player = await getApp().TourManager.player
-    if (isPlay.value) {
-        player.pause()
-        store.commit('tour/setData', { isPlay: false })
-    }
-    if (flying.value) {
-        return
+  //关闭热点面板时候，继续播放之前暂停的音频
+  if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
+    if (hotData.value.type == "audio" || hotData.value.type == "video") {
+      // console.log('resume')
+      window.parent.postMessage(
+        {
+          source: "qjkankan",
+          event: "toggleBgmStatus",
+          params: {
+            status: true,
+          },
+        },
+        "*"
+      );
     }
-    if (isFixed.value && !isEdit.value && hotData.value.sid == item.sid && !positionInfo.value) {
-        closeTag()
-    } else {
-        if (!enterVisible.value && !editPosition.value) {
-            if (!isEdit.value && !positionInfo.value) {
-                store.commit('tag/show', index)
-                store.commit('tag/setFixed', true)
-                showInfo.value = true
-                store.commit('tag/setToggleIndex', index)
-                store.commit('tag/gotoTag', item)
-            }
-            store.commit('tag/setClick', true)
+  }
+  // store.commit('tag/setData', { isFixed: false, isClick: false, flyClose: false })
+  store.commit("tag/setData", { isFixed: false, isClick: false });
+  store.commit("tag/closeTag");
+
+  // store.commit('tag/setFixed', false)
+  // store.commit('tag/closeTag')
+  // store.commit('tag/setClick', false)
+  showInfo.value = false;
+};
+const goTag = async (event, item, index) => {
+  let player = await getApp().TourManager.player;
+  if (isPlay.value && !event.fixed) {
+    player.pause();
+    store.commit("tour/setData", { isPlay: false });
+  }
+  if (flying.value) {
+    return;
+  }
+  if (
+    isFixed.value &&
+    !isEdit.value &&
+    hotData.value.sid == item.sid &&
+    !positionInfo.value
+  ) {
+    __close = true;
+    getApp().TagManager.close(hotData.value.sid);
+    closeTag();
+  } else {
+    if (!enterVisible.value && !editPosition.value) {
+      if (!isEdit.value && !positionInfo.value) {
+        store.commit("tag/show", index);
+        store.commit("tag/setFixed", true);
+        showInfo.value = true;
+        store.commit("tag/setToggleIndex", index);
+        if (event.fixed) {
+          store.commit("tag/gotoTag", { tag: item, fixed: true });
+          // store.commit('tag/gotoTag', { tag: item })
         } else {
-            //热点可视操作
-            getApp().TagManager.edit.setTagVisi(item.sid)
+          store.commit("tag/gotoTag", { tag: item });
         }
+      }
+      //没有t_id时候 不需要延时
+      if (!browser.hasURLParam("t_id")) {
+        let timer = setTimeout(() => {
+          // store.commit('tag/setData', { flyClose: true })
+          clearTimeout(timer);
+          timer = null;
+        }, 1000);
+      }
+
+      store.commit("tag/setClick", true);
+    } else {
+      //热点可视操作
+      getApp().TagManager.edit.setTagVisi(item.sid);
     }
-}
+  }
+};
 
 onMounted(async () => {
-    const app = await useApp()
-    await app.TagManager.tag()
-    init = false
-
-    tags$.value = '[xui_tags]'
-    app.TagManager.updatePosition(tags.value)
-    if (app.config.mobile) {
-        nextTick(() => {
-            // let player = document.querySelector('.player')
-            // player.addEventListener('touchstart', onClickHandler)
-        })
-    } else {
-        window.addEventListener('click', onClickHandler)
+  const app = await useApp();
+  app.Camera.on("flying.started", (pano) => {
+    if (!pano.isTagFlying && hotData.value && !isEdit.value) {
+      closeTag();
     }
-})
-const getUrl = icon => {
-    let url = icon == '' || !icon ? getApp().resource.getAppURL('images/tag_icon_default.svg') : icon
-
-    return common.changeUrl(url)
-}
-const onMouseEnter = (tag, index) => {
-    if (!getApp().config.mobile) {
-        if (flying.value || isPlay.value) {
-            return
+    // if (flyClose.value && hotData.value && !isEdit.value) {
+    //     getApp().TagManager.close(hotData.value.sid)
+    //     closeTag()
+    // }
+  });
+  app.Scene.on("loadeddata", () => {
+    if (browser.hasURLParam("t_id")) {
+      let t_id = browser.getURLParam("t_id");
+      for (let i = 0; i < tags.value.length; i++) {
+        if (tags.value[i].sid == t_id) {
+          goTag({}, tags.value[i], i);
         }
-        if (!enterVisible.value && !editPosition.value && !isEdit.value && !positionInfo.value) {
-            // console.log('onMouseEnter')
+      }
+    }
+  });
+  // app.Camera.on('flying.ended', ({ targetPano }) => {
+  // })
+  await app.TagManager.tag();
+  init = false;
 
-            showInfo.value = true
-            store.commit('tag/show', index)
+  tags$.value = "[xui_tags]";
+  app.TagManager.updatePosition(tags.value);
+  if (app.config.mobile) {
+    nextTick(() => {
+      // let player = document.querySelector('.player')
+      // player.addEventListener('touchstart', onClickHandler)
+    });
+  } else {
+    // window.addEventListener('click', onClickHandler)
+  }
+});
+const getUrl = (icon) => {
+  let url =
+    icon == "" || !icon
+      ? getApp().resource.getAppURL("images/tag_icon_default.svg")
+      : icon;
 
-            store.commit('tag/setToggleIndex', index)
-            if (leaveId.value != tag.sid) {
-                //聚焦后 移到其他热点取消fixed
-                store.commit('tag/setFixed', false)
-            }
-        }
+  return common.changeUrl(url, true);
+};
+let __fixed = false;
+let __close = false;
+const onMouseEnter = (event, tag, index) => {
+  if (tag.type == "audio" || tag.type == "video") {
+    musicPlayer.pause(true);
+  }
+  if (__fixed) {
+    return;
+  }
+  if (__close) {
+    return;
+  }
+  if (event.fixed) {
+    // store.commit('tag/setData', { flyClose: true, isFixed: true })
+    store.commit("tag/setData", { isFixed: true });
+    __fixed = true;
+  }
+
+  if (!getApp().config.mobile) {
+    // if (flying.value || isPlay.value) {
+    if (flying.value) {
+      return;
+    }
+    // if (!enterVisible.value && !editPosition.value && !isEdit.value && !positionInfo.value && !hotData.value) {
+    if (
+      !enterVisible.value &&
+      !editPosition.value &&
+      !isEdit.value &&
+      !positionInfo.value
+    ) {
+    //   Track("view-tag", {
+    //     eventType: "hover",
+    //     hover: 1,
+    //   });
+      showInfo.value = true;
+      store.commit("tag/show", index);
+
+      store.commit("tag/setToggleIndex", index);
+      if (leaveId.value && leaveId.value != tag.sid) {
+        //聚焦后 移到其他热点取消fixed
+        store.commit("tag/setFixed", false);
+      }
     }
-}
+  }
+};
 
 const onMouseLeave = (event, tag) => {
-    if (!getApp().config.mobile) {
-        if (flying.value) {
-            return
-        }
-        if (event.relatedTarget != null) {
-            // if (!isEdit.value) {
-            showInfo.value = false
-            // }
-            store.commit('tag/setLeaveId', tag.sid)
-            if (!enterVisible.value && !isFixed.value && !showMsg.value && !editPosition.value && !positionInfo.value) {
-                closeTag()
-            }
-        }
+  if (event.unfixed) {
+    __fixed = false;
+    store.commit("tag/setData", { isFixed: false });
+  }
+  if (__fixed) {
+    return;
+  }
+
+  if (!getApp().config.mobile) {
+    if (flying.value) {
+      return;
     }
-}
+    if (event.relatedTarget != null) {
+      __close = false;
+
+      // if (!isEdit.value) {
+      showInfo.value = false;
+      // }
+      store.commit("tag/setLeaveId", tag.sid);
+      if (
+        !enterVisible.value &&
+        !isFixed.value &&
+        !showMsg.value &&
+        !editPosition.value &&
+        !positionInfo.value &&
+        hotData.value
+      ) {
+        closeTag();
+      }
+    }
+  }
+};
 
 const onClickHandler = () => {
-    // if (flying.value) {
-    //     return
-    // }
+  // if (flying.value) {
+  //     return
+  // }
 
-    if (!isEdit.value && !positionInfo.value && isFixed.value) {
-        closeTag()
-    }
-}
+  if (!isEdit.value && !positionInfo.value && isFixed.value) {
+    closeTag();
+  }
+};
 </script>

packages/qjkankan-kankan-view/src/components/Tags/old.vue

@@ -0,0 +1,213 @@
+<template>
+    <teleport :to="tags$" v-if="tags$">
+        <template v-for="(tag, index) in tags">
+            <div :tag-sid="tag.sid" @mouseleave="onMouseLeave($event, tag)" :style="{ left: tag.x + 'px', top: tag.y + 'px' }" :class="{ visible: tag.visible }">
+                <span @click.stop="goTag(tag, index)" class="point zoom" @mouseenter.stop="onMouseEnter(tag, index)" :style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"></span>
+                <div class="content">
+                    <div class="trans" :class="{ active: (isFixed && hotData && tag.sid == hotData.sid) || (showInfo && hotData && tag.sid == hotData.sid) }">
+                        <template v-if="hotData && tag.sid == hotData.sid && !showMsg">
+                            <div class="arrow" :id="`arrow_${tag.sid}`">
+                                <ui-icon @click.stop="closeTag" v-if="getApp().config.mobile" type="close"></ui-icon>
+                            </div>
+                            <ShowTag @click.stop="" v-if="!isEdit && hotData" @open="openInfo" />
+                        </template>
+                    </div>
+                </div>
+                <TagView @click.stop="" v-if="showMsg && toggleIndex == index" @close="closeInfo" />
+            </div>
+        </template>
+    </teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch, watchEffect, onActivated, onDeactivated, getCurrentInstance, nextTick } from 'vue'
+import { getApp, useApp } from '@/app'
+import { useStore } from 'vuex'
+import common from '../../utils/common'
+import TagView from './tag-view.vue'
+import ShowTag from './show-tag.vue'
+import { useRoute } from 'vue-router'
+import { useMusicPlayer } from '@/utils/sound'
+const musicPlayer = useMusicPlayer()
+let init = true
+const hotData = computed(() => {
+    let data = store.getters['tag/hotData']
+    if (!data) {
+        // musicPlayer.play()
+        // musicPlayer.pause(true)
+        // if (!getApp().Scene.isCurrentPanoHasVideo) {
+        //     console.log('resume')
+        //     console.log(init)
+        //     musicPlayer.resume()
+        // }
+    }
+    return data
+})
+const isPlay = computed(() => store.getters['tour/isPlay'])
+const router = computed(() => store.getters['router'])
+const flying = computed(() => store.getters['flying'])
+const leaveId = computed(() => store.getters['tag/leaveId'])
+const isEdit = computed(() => store.getters['tag/isEdit'])
+const isFixed = computed(() => store.getters['tag/isFixed'])
+const enterVisible = computed(() => store.getters['tag/enterVisible'])
+const editPosition = computed(() => store.getters['tag/editPosition'])
+const toggleIndex = computed(() => store.getters['tag/toggleIndex'])
+const isClick = computed(() => store.getters['tag/isClick'])
+const editModule = computed(() => store.getters['editModule'])
+const positionInfo = computed(() => store.getters['tag/positionInfo'])
+const store = useStore()
+const tags$ = ref(null)
+const tags = computed(() => {
+    return store.getters['tag/tags'] || []
+})
+
+watch(
+    () => router.value.name,
+    (val, old) => {
+        // console.log(val)
+        if (val !== 'tag') {
+            store.commit('tag/setFixed', false)
+        }
+    }
+)
+
+const showInfo = ref(false)
+const showMsg = ref(false)
+// const toggleIndex = ref(null)
+const openInfo = () => {
+    showMsg.value = true
+    store.commit('tag/setFixed', false)
+    showInfo.value = false
+}
+const closeInfo = () => {
+    showMsg.value = false
+    if (isClick.value) {
+        //只有点击定位的才恢复显示
+        store.commit('tag/show', toggleIndex.value)
+        store.commit('tag/setFixed', true)
+        // showInfo.value = true
+        showInfo.value = false
+    }
+    // store.commit('tag/setClick', false)
+}
+const closeTag = async () => {
+    const app = getApp()
+    const player = await app.TourManager.player
+    //关闭热点面板时候，继续播放之前暂停的音频
+    if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
+        if ( hotData.value && (hotData.value.type == 'audio' || hotData.value.type == 'video')) {
+            // console.log('resume')
+            window.parent.postMessage(
+            {
+                source: "qjkankan",
+                event: "toggleBgmStatus",
+                params: {
+                    status: true,
+                },
+            },
+            "*"
+            );
+        }
+    }
+
+    store.commit('tag/setFixed', false)
+    store.commit('tag/closeTag')
+    store.commit('tag/setClick', false)
+    showInfo.value = false
+}
+const goTag = async (item, index) => {
+    let player = await getApp().TourManager.player
+    if (isPlay.value) {
+        player.pause()
+        store.commit('tour/setData', { isPlay: false })
+    }
+    if (flying.value) {
+        return
+    }
+    if (isFixed.value && !isEdit.value && hotData.value.sid == item.sid && !positionInfo.value) {
+        closeTag()
+    } else {
+        if (!enterVisible.value && !editPosition.value) {
+            if (!isEdit.value && !positionInfo.value) {
+                store.commit('tag/show', index)
+                store.commit('tag/setFixed', true)
+                showInfo.value = true
+                store.commit('tag/setToggleIndex', index)
+                store.commit('tag/gotoTag', item)
+            }
+            store.commit('tag/setClick', true)
+        } else {
+            //热点可视操作
+            getApp().TagManager.edit.setTagVisi(item.sid)
+        }
+    }
+}
+
+onMounted(async () => {
+    const app = await useApp()
+    await app.TagManager.tag()
+    init = false
+
+    tags$.value = '[xui_tags]'
+    app.TagManager.updatePosition(tags.value)
+    if (app.config.mobile) {
+        nextTick(() => {
+            // let player = document.querySelector('.player')
+            // player.addEventListener('touchstart', onClickHandler)
+        })
+    } else {
+        window.addEventListener('click', onClickHandler)
+    }
+})
+const getUrl = icon => {
+    let url = icon == '' || !icon ? getApp().resource.getAppURL('images/tag_icon_default.svg') : icon
+
+    return common.changeUrl(url)
+}
+const onMouseEnter = (tag, index) => {
+    if (!getApp().config.mobile) {
+        if (flying.value || isPlay.value) {
+            return
+        }
+        if (!enterVisible.value && !editPosition.value && !isEdit.value && !positionInfo.value) {
+            // console.log('onMouseEnter')
+
+            showInfo.value = true
+            store.commit('tag/show', index)
+
+            store.commit('tag/setToggleIndex', index)
+            if (leaveId.value != tag.sid) {
+                //聚焦后 移到其他热点取消fixed
+                store.commit('tag/setFixed', false)
+            }
+        }
+    }
+}
+
+const onMouseLeave = (event, tag) => {
+    if (!getApp().config.mobile) {
+        if (flying.value) {
+            return
+        }
+        if (event.relatedTarget != null) {
+            // if (!isEdit.value) {
+            showInfo.value = false
+            // }
+            store.commit('tag/setLeaveId', tag.sid)
+            if (!enterVisible.value && !isFixed.value && !showMsg.value && !editPosition.value && !positionInfo.value) {
+                closeTag()
+            }
+        }
+    }
+}
+
+const onClickHandler = () => {
+    // if (flying.value) {
+    //     return
+    // }
+
+    if (!isEdit.value && !positionInfo.value && isFixed.value) {
+        closeTag()
+    }
+}
+</script>

packages/qjkankan-kankan-view/src/store/modules/tag.js

@@ -1,7 +1,10 @@
 import { getApp, getNum } from '@/app'
-// import { Loading, Dialog } from '@/global_components/'
+// import { Loading, Dialog } from '@kankan/components'
 import { nextTick } from 'vue'
 import common from '@/utils/common'
+import { custom } from '@/components/Tags/constant.js'
+
+const customer = custom()
 
 export default {
     namespaced: true,
@@ -9,10 +12,6 @@ export default {
         return {
             tagsList: null,
             iconsList: null,
-            tagClickType: {
-                type:'',
-                data:{}
-            },
             timer: null,
             hotData: null,
             isEdit: false,
@@ -31,6 +30,7 @@ export default {
             leaveId: null,
             metaDelList: [],
             historyIcon: null, //记录上一个选择的icon
+            // flyClose: false,
         }
     },
     getters: {
@@ -50,7 +50,6 @@ export default {
         },
         isEdit: state => state.isEdit,
         isFixed: state => state.isFixed,
-        tagClickType: state => state.tagClickType,
         tags: (state, getters, rootState, rootGetters) => {
             let tags = state.tagsList
             if (!state.tags && tags) {
@@ -90,6 +89,7 @@ export default {
         leaveId: state => state.leaveId,
         isClick: state => state.isClick,
         positionInfo: state => state.positionInfo,
+        // flyClose: state => state.flyClose,
     },
     mutations: {
         add(state, payload) {
@@ -114,7 +114,43 @@ export default {
         },
         load(state, data) {
             if (data) {
-                state.tagsList = data.tags
+                let res
+                if (data.tags.length > 0) {
+                    //过滤非customer定义类型的热点数据
+                    res = data.tags.filter(item => {
+                        let tag = null
+                        for (let key in customer) {
+                            // console.log(key)
+                            if (key == item.type) {
+                                tag = item
+                            }
+                        }
+                        return tag
+                    })
+                    // console.log(res)
+                }
+
+                // state.tagsList = data.tags
+                state.tagsList = res || []
+                if (state.tagsList.length > 0) {
+                    let panos = getApp().Scene.panos.index
+                    for (let i = 0; i < state.tagsList.length; i++) {
+                        if (state.tagsList[i].panoId) {
+                            //当热点存在点位ID
+                            if (panos[state.tagsList[i].panoId]) {
+                                //并且热点点位ID存在
+                                state.tagsList[i]['isLose'] = 0
+                            } else {
+                                //当热点点位ID 不存在，则为失效
+                                state.tagsList[i]['isLose'] = 1
+                            }
+                        } else {
+                            //当热点没有点位ID ，则是旧数据。
+                            state.tagsList[i]['isLose'] = 0
+                        }
+                    }
+                }
+
                 state.iconsList = data.icons
             } else {
                 state.tagsList = []
@@ -166,6 +202,11 @@ export default {
                 state.iconId = ''
             }
         },
+        setData(state, payload) {
+            for (let key in payload) {
+                state[key] = payload[key]
+            }
+        },
         setLeaveId(state, payload) {
             state.leaveId = payload
         },
@@ -242,28 +283,28 @@ export default {
         },
         async closeTag(state, payload) {
             //用于回滚热点
-            state.tags = null
-            state.icons = null
-            state.delIconList = []
-            state.isFixed = false
-            state.iconId = ''
-            state.isEdit = false
-            if (state.positionInfo) {
-                state.positionInfo = null
+            // state.tags = null
+            // state.icons = null
+            // state.delIconList = []
+            // state.isFixed = false
+            // state.iconId = ''
+            // state.isEdit = false
+            // if (state.positionInfo) {
+            //     state.positionInfo = null
+            // }
+            // state.flyClose = false
+            if (!state.timer) {
+                state.timer = setTimeout(() => {
+                    state.hotData = null
+                    clearTimeout(state.timer)
+                    state.timer = null
+                }, 300)
             }
-            state.timer = setTimeout(() => {
-                state.hotData = null
-                clearTimeout(state.timer)
-                state.timer = null
-            }, 300)
         },
 
         setFixed(state, payload) {
             state.isFixed = payload
         },
-        setTagClickType(state, payload) {
-            state.tagClickType = payload.value || payload
-        },
         setTitle(state, payload) {
             state.hotData.title = payload
         },
@@ -360,35 +401,40 @@ export default {
         setClick(state, payload) {
             state.isClick = payload
         },
-        gotoTag(state, item, tag) {
+        gotoTag(state, payload) {
             nextTick(() => {
                 let t = setTimeout(() => {
                     clearTimeout(t)
-                    let tagBox = document.getElementById(`tagBox_${item.sid}`)
-                    let arrowBox = document.getElementById(`arrow_${item.sid}`)
-                    let tagBox_w = tagBox.getBoundingClientRect().width
-                    let tagBox_h = tagBox.getBoundingClientRect().height
-                    let arrowBox_w = arrowBox.getBoundingClientRect().width
-                    let arrowBox_h = arrowBox.getBoundingClientRect().height
 
-                    let params = {
-                        sid: item.sid,
-
-                        tagBox: {
-                            width: tagBox_w,
-                            height: tagBox_h,
-                        },
-                        arrowBox: {
-                            width: arrowBox_w,
-                            height: arrowBox_h,
-                        },
-                    }
-                    if (tag) {
-                        params.tag = tag
-                    }
-                    let position = getApp().config.mobile ? 'top' : 'left'
-                    getApp().TagManager.focus(params, 'board', position)
-                }, 0)
+                    let tagBox = document.getElementById(`tagBox_${payload.tag.sid}`)
+                    let arrowBox = document.getElementById(`arrow_${payload.tag.sid}`)
+                    try {
+                        let tagBox_w = tagBox.getBoundingClientRect().width
+                        let tagBox_h = tagBox.getBoundingClientRect().height
+                        let arrowBox_w = arrowBox.getBoundingClientRect().width
+                        let arrowBox_h = arrowBox.getBoundingClientRect().height
+                        let params = {
+                            sid: payload.tag.sid,
+                            tagBox: {
+                                width: tagBox_w,
+                                height: tagBox_h,
+                            },
+                            arrowBox: {
+                                width: arrowBox_w,
+                                height: arrowBox_h,
+                            },
+                        }
+                        // if (tag) {
+                        //     params.tag = tag
+                        // }
+                        // let position = getApp().config.mobile ? 'top' : 'left'
+                        if (payload.fixed) {
+                            return
+                        }
+                        let position = getApp().config.mobile ? 'center' : 'left'
+                        getApp().TagManager.focus(params, 'board', position)
+                    } catch (err) {}
+                }, 300)
             })
         },
         setVisible(state, payload) {
@@ -419,7 +465,7 @@ export default {
             }
         },
         async tagDelete({ commit, state }, payload) {
-            Loading.show()
+            // Loading.show()
             let params = {
                 num: getNum(),
                 sidList: [payload.item.sid],

packages/qjkankan-view/src/components/Fdkk/index.vue

@@ -16,6 +16,8 @@
     <iframe allowfullscreen="true" allow="autoplay" :key="currentScene.sceneCode" v-else id="fdkkifr"
       :src="`${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}&lang=${lang}`"
       frameborder="0"></iframe>
+
+
     <!-- :src="`http://192.168.20.66:8080/${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}`" -->