ZhongMianAdmin/packages/kankan-viewer/src/pages/SPG.vue

<template>
    <Password />
    <LoadingLogo :thumb="true" />
    <div class="ui-view-layout" :class="{ show: show }">
        <div class="scene" ref="scene$"></div>
        <!-- <template v-show="sceneUi"> -->
        <div v-show="sceneUI">
            <UiTags />
            <Information />
            <BottomControl />
        </div>
        <!-- </template> -->
    </div>
    <DesignOption />
    <Camera />
</template>

<script setup>
import { useMusicPlayer } from '@/utils/sound'
// import UiTags from '@/components/Tags'
import UiTags from '@/components/Tags'
import DesignOption from './DesignOption'
import Information from '@/components/Information'
import BottomControl from '@/components/Controls/BottomControl'
import Password from '@/components/shared/Password.vue'
import LoadingLogo from '@/components/shared/Loading.vue'
import Camera from '@/components/Camera'
import { createApp } from '@/app'
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useApp, getApp } from '@/app'
import browser from '@/utils/browser'
import { useI18n, getLocale } from '@/i18n'
import { Track, startTrack, endTrack } from '@/utils/track.js'
import { nextTick } from 'process'
const { t } = useI18n({ useScope: 'global' })
const musicPlayer = useMusicPlayer()

const store = useStore()
const show = ref(false)
const scene$ = ref(null)
const tours = computed(() => store.getters['tour/tours'])
const isPlay = computed(() => store.getters['tour/isPlay'])
const sceneUI = computed(() => store.getters['sceneUI'])
const mode = computed(() => store.getters['mode'])
onMounted(() => {
    const app = createApp({
        num: browser.getURLParam('m'),
        dom: scene$.value,
        lang: getLocale(),
        langs: {
            en: {
                'model.enter': t('model.enter'),
                'common.about': t('common.about'),
                'common.meter': t('common.meter'),
            },
        },
        useShortcutKeys: true,
    })
    app.use('MinMap')
    app.use('Tag')
    // app.use('TourRecorder')
    app.use('TourPlayer')
    app.TourManager.on('loaded', list => {
        store.commit('tour/loaded', list)
    })
    app.Scene.lock()
    app.Scene.on('ready', () => {
        endTrack('view-timing', {
            eventType: 'time',
            time: 'first',
        })

        show.value = true
    })
    app.Scene.on('error', data => {
        console.error(data)
        switch (data.code) {
            case 5033:
                window.location.replace(`/5033.html?m=` + browser.getURLParam('m') + '&lang=' + (browser.getURLParam('lang') || 'zh'))
                break
            case 5034:
                window.location.replace(`/5034.html?m=` + browser.getURLParam('m') + '&lang=' + (browser.getURLParam('lang') || 'zh'))
                break
            case 5009:
                window.location.replace(`/5034.html?m=` + browser.getURLParam('m') + '&lang=' + (browser.getURLParam('lang') || 'zh'))
                break
            case 5005:
                window.location.replace(`/#/404.html?m=` + browser.getURLParam('m') + '&lang=' + (browser.getURLParam('lang') || 'zh'))
                break
        }
    })
    app.Scene.on('loaded', pano => {
        store.commit('setPanoId', pano.id)
        endTrack('view-timing', {
            eventType: 'time',
            time: 'all',
        })
        nextTick(() => {
            let map = document.querySelector('.kankan-app div[xui_min_map]')
            map.addEventListener('click', () => {
                Track('view-button', {
                    eventType: 'click',
                    click: 'minimap',
                })
            })
        })
        store.commit('setFloorId', pano.floorIndex)
        useMusicPlayer()
    })
    app.store.on('tags', tags => {
        store.commit('tag/load', tags)
    })
    app.store.on('cameras', cameras => {
        store.commit('camera/setData', { cameras })
    })
    app.store.on('metadata', metadata => {
        store.commit('scene/load', metadata)
        if (!metadata.controls.showMap) {
            app.MinMap.hide(true)
        }
    })
    app.Scene.on('panorama.videorenderer.resumerender', () => {
        musicPlayer.pause(true)
    })

    app.Scene.on('panorama.videorenderer.suspendrender', async () => {
        let player = await getApp().TourManager.player
        if (!player.isPlaying && !isPlay.value) {
            musicPlayer.resume()
        }
    })
    app.Camera.on('mode.beforeChange', ({ fromMode, toMode, floorIndex }) => {
        if (fromMode) {
            store.commit('setFlying', true)
        }
    })
    app.Camera.on('mode.afterChange', ({ toMode, floorIndex }) => {
        store.commit('setFlying', false)
    })
    app.Camera.on('flying.started', pano => {
        store.commit('setFlying', true)
    })
    app.Camera.on('flying.ended', ({ targetPano }) => {
        if (mode.value == 'panorama') {
            if (targetPano.hasVideo) {
                Track('view-pano-type', {
                    eventType: 'click',
                    click: 2,
                })
            } else {
                Track('view-pano-type', {
                    eventType: 'click',
                    click: 1,
                })
            }
        }
        store.commit('setFlying', false)
        store.commit('setPanoId', targetPano.id)
    })
    // app.store.on('tour', async tour => {
    //     app.TourManager.load(tour)
    //     store.commit('tour/setData', {
    //         tours: JSON.parse(
    //             JSON.stringify(app.TourManager.tours, (key, val) => {
    //                 if (key === 'audio') {
    //                     return null
    //                 } else {
    //                     return val
    //                 }
    //             })
    //         ),
    //     })
    //     store.commit('tour/setBackUp', {
    //         tours: JSON.parse(
    //             JSON.stringify(app.TourManager.tours, (key, val) => {
    //                 if (key === 'audio') {
    //                     return null
    //                 } else {
    //                     return val
    //                 }
    //             })
    //         ),
    //     })
    // })
    app.store.on('floorcad', floor => store.commit('scene/loadFloorData', floor))
    app.render()
})
</script>