|
|
@@ -6,20 +6,25 @@
|
|
|
@mouseleave.prevent="onMouseLeave($event, tag)"
|
|
|
:style="{
|
|
|
transform: `translate3d(${tag.x}px,${tag.y}px,0)`,
|
|
|
- 'z-index': 1,
|
|
|
+ 'z-index': isShowTag(tag) ? 1 : 0,
|
|
|
}"
|
|
|
:class="{
|
|
|
- visible: true,
|
|
|
+ visible: tag.visible,
|
|
|
}"
|
|
|
>
|
|
|
<span
|
|
|
class="point zoom"
|
|
|
- @mouseenter.prevent="onMouseEnter($event, tag, index)"
|
|
|
+ @mouseenter.prevent="onMouseEnter($event, tag)"
|
|
|
@click.stop="goTag($event, tag, index)"
|
|
|
:style="{ 'background-image': 'url(' + getUrl(tag.icon) + ')' }"
|
|
|
></span>
|
|
|
<div class="content">
|
|
|
- <div class="trans">
|
|
|
+ <div
|
|
|
+ class="trans"
|
|
|
+ :class="{
|
|
|
+ active: isShowTag(tag),
|
|
|
+ }"
|
|
|
+ >
|
|
|
<!-- :class="{
|
|
|
fixed: isPlay,
|
|
|
active:
|
|
|
@@ -28,9 +33,12 @@
|
|
|
}" -->
|
|
|
<template v-if="tag && !showMsg">
|
|
|
<div class="arrow" :id="`arrow_${tag.sid}`">
|
|
|
- <!-- <ui-icon @click.stop="closeTag" type="close" /> -->
|
|
|
+ <i
|
|
|
+ @click.stop="closeTag"
|
|
|
+ class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
- <!-- <ShowTag @click.stop="" v-if="tag" @open="openInfo" /> -->
|
|
|
+ <ShowTag @click.stop="" :tag="tag" v-if="tag" @open="openInfo" />
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -41,8 +49,8 @@
|
|
|
</teleport>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, nextTick } from 'vue';
|
|
|
- import { useSceneStore } from '/@/store/modules/scene';
|
|
|
+ import { ref, onMounted, nextTick, unref } from 'vue';
|
|
|
+ import { useSceneStore, tagType } from '/@/store/modules/scene';
|
|
|
import { computed } from 'vue';
|
|
|
import { getApp, useApp } from '/@/hooks/userApp';
|
|
|
import browser from '/@/utils/browser';
|
|
|
@@ -51,70 +59,49 @@
|
|
|
import { changeUrl } from './common';
|
|
|
import { watchEffect } from 'vue';
|
|
|
// 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();
|
|
|
+ import ShowTag from './show-tag.vue';
|
|
|
const sceneStore = useSceneStore();
|
|
|
const tags$ = ref('');
|
|
|
const tags = computed(() => sceneStore.tags);
|
|
|
|
|
|
- const showInfo = ref(false);
|
|
|
+ const showInfo = ref<tagType | null>(null);
|
|
|
+ const isClick = ref(false);
|
|
|
const showMsg = ref(false);
|
|
|
+ const isShowTag = computed(() => {
|
|
|
+ return (tag: tagType) => {
|
|
|
+ return showInfo.value && showInfo.value.sid === tag.sid;
|
|
|
+ };
|
|
|
+ });
|
|
|
// const toggleIndex = ref(null)
|
|
|
const openInfo = () => {
|
|
|
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)
|
|
|
+ // store.commit('tag/setData', { isFixed: false, isClick: true });
|
|
|
+ showInfo.value = null;
|
|
|
};
|
|
|
+ const closeInfo = () => {};
|
|
|
+
|
|
|
const closeTag = async () => {
|
|
|
- const app = getApp();
|
|
|
- const player = await app.TourManager.player;
|
|
|
+ showInfo.value = null;
|
|
|
+ isClick.value = false;
|
|
|
+ };
|
|
|
|
|
|
- //关闭热点面板时候，继续播放之前暂停的音频
|
|
|
- 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,
|
|
|
- },
|
|
|
- },
|
|
|
- '*',
|
|
|
- );
|
|
|
- }
|
|
|
+ const goTag = async (_, item: tagType) => {
|
|
|
+ // const app = await useApp();
|
|
|
+ if (unref(isClick)) {
|
|
|
+ showInfo.value = null;
|
|
|
+ isClick.value = false;
|
|
|
+ } else {
|
|
|
+ isClick.value = true;
|
|
|
+ focusTag(item);
|
|
|
}
|
|
|
- // 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) => {};
|
|
|
- const onMouseLeave = (...arg) => {
|
|
|
- console.log(arg);
|
|
|
+ const onMouseLeave = (_, tag: tagType) => {
|
|
|
+ if (!unref(isClick) && showInfo.value?.sid === tag.sid) {
|
|
|
+ showInfo.value = null;
|
|
|
+ }
|
|
|
};
|
|
|
- const onMouseEnter = (...arg) => {
|
|
|
- console.log(arg);
|
|
|
+ const onMouseEnter = (_, tag: tagType) => {
|
|
|
+ showInfo.value = tag;
|
|
|
};
|
|
|
|
|
|
onMounted(async () => {
|
|
|
@@ -126,34 +113,26 @@
|
|
|
watchEffect(() => {
|
|
|
if (tags.value?.length) {
|
|
|
app.TagManager.load(tags.value);
|
|
|
+ app.TagManager.updatePosition(tags.value);
|
|
|
}
|
|
|
});
|
|
|
- app.Camera.on('flying.started', (pano) => {
|
|
|
- // if (!pano.isTagFlying && hotData.value && !isEdit.value) {
|
|
|
- // closeTag();
|
|
|
- // }
|
|
|
- // 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);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ app.Camera.on('flying.started', (pano) => {});
|
|
|
+ // 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);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
// app.Camera.on('flying.ended', ({ targetPano }) => {
|
|
|
// })
|
|
|
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')
|
|
|
@@ -170,9 +149,40 @@
|
|
|
return changeUrl(url);
|
|
|
};
|
|
|
|
|
|
- const onClickHandler = () => {
|
|
|
- // if (!isEdit.value && !positionInfo.value && isFixed.value) {
|
|
|
- // closeTag();
|
|
|
- // }
|
|
|
+ const focusTag = (tag: tagType) => {
|
|
|
+ nextTick(async () => {
|
|
|
+ const app = await useApp();
|
|
|
+ let t = setTimeout(() => {
|
|
|
+ clearTimeout(t);
|
|
|
+ let tagBox = document.getElementById(`tagBox_${tag.sid}`);
|
|
|
+ let arrowBox = document.getElementById(`arrow_${tag.sid}`);
|
|
|
+ try {
|
|
|
+ let tagBox_w = tagBox ? tagBox.getBoundingClientRect().width : 0;
|
|
|
+ let tagBox_h = tagBox ? tagBox.getBoundingClientRect().height : 0;
|
|
|
+ let arrowBox_w = arrowBox ? arrowBox.getBoundingClientRect().width : 0;
|
|
|
+ let arrowBox_h = arrowBox ? arrowBox.getBoundingClientRect().height : 0;
|
|
|
+ let params = {
|
|
|
+ sid: tag.sid,
|
|
|
+ tagBox: {
|
|
|
+ width: tagBox_w,
|
|
|
+ height: tagBox_h,
|
|
|
+ },
|
|
|
+ arrowBox: {
|
|
|
+ width: arrowBox_w,
|
|
|
+ height: arrowBox_h,
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ let position = getApp().config.mobile ? 'center' : 'left';
|
|
|
+ app.TagManager.focus(params, 'board', position);
|
|
|
+ } catch (err) {}
|
|
|
+ }, 300);
|
|
|
+ });
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ [is-mobile] .ui-view-layout [xui_tags] .content .trans {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+</style>
|
gemercheung