|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
- <LoadingLogo v-if="workEnable" />
|
|
|
+ <LoadingLogo v-if="workEnable" />
|
|
|
<template v-if="workEnable">
|
|
|
+ <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover" />
|
|
|
<Password />
|
|
|
<Share />
|
|
|
<div class="ui-view-layout" :class="{ show: show }">
|
|
|
<Pano />
|
|
|
<Tags />
|
|
|
- <UiGather/>
|
|
|
- <TitieSlide/>
|
|
|
+ <UiGather />
|
|
|
+ <TitieSlide />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -22,7 +23,7 @@ import Share from "@/components/assembly/Share";
|
|
|
import Error from "@/components/assembly/Error";
|
|
|
import UiGather from "@/components/UIGather/mobile";
|
|
|
import TitieSlide from "@/components/assembly/titieSlide";
|
|
|
-
|
|
|
+import Opening from "@/components/assembly/OpeningMobile";
|
|
|
import LoadingLogo from "@/components/assembly/Loading";
|
|
|
import { createApp } from "@/app";
|
|
|
|
|
@@ -31,41 +32,42 @@ import { getPanoInfo, checkWork } from "@/apis";
|
|
|
import { useStore } from "vuex";
|
|
|
import config from "@/utils/config";
|
|
|
import browser from "@/utils/browser";
|
|
|
-import { useApp } from '@/app'
|
|
|
-import { useI18n, getLocale } from '@/i18n'
|
|
|
-const { t } = useI18n({ useScope: 'global' })
|
|
|
-
|
|
|
+import { useApp } from "@/app";
|
|
|
+import { useI18n, getLocale } from "@/i18n";
|
|
|
+const { t } = useI18n({ useScope: "global" });
|
|
|
|
|
|
+const coverInfo = ref({});
|
|
|
|
|
|
const fixOpening = {
|
|
|
- '小行星开场': 1,
|
|
|
- '水平巡游开场': 2,
|
|
|
- '小行星巡游开场': 3,
|
|
|
- '水晶球开场': 4,
|
|
|
- '小行星缩放开场': 5,
|
|
|
-}
|
|
|
+ 小行星开场: 1,
|
|
|
+ 水平巡游开场: 2,
|
|
|
+ 小行星巡游开场: 3,
|
|
|
+ 水晶球开场: 4,
|
|
|
+ 小行星缩放开场: 5,
|
|
|
+};
|
|
|
|
|
|
const store = useStore();
|
|
|
const show = ref(false);
|
|
|
const workEnable = ref(true);
|
|
|
-const lang = getLocale()
|
|
|
-
|
|
|
+const lang = getLocale();
|
|
|
|
|
|
const currentScene = computed(() => store.getters["scene/currentScene"]);
|
|
|
-const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
|
|
|
+const currentCatalogRoot = computed(
|
|
|
+ () => store.getters["scene/currentCatalogRoot"]
|
|
|
+);
|
|
|
|
|
|
const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
|
|
|
|
|
|
-
|
|
|
const earthMask = computed(() => store.getters["scene/earthMask"]);
|
|
|
const skyMask = computed(() => store.getters["scene/skyMask"]);
|
|
|
|
|
|
-
|
|
|
-
|
|
|
onMounted(async () => {
|
|
|
if (!browser.isMobile()) {
|
|
|
- window.location.href = window.location.href.replace('showMobile.html','show.html')
|
|
|
- return
|
|
|
+ window.location.href = window.location.href.replace(
|
|
|
+ "showMobile.html",
|
|
|
+ "show.html"
|
|
|
+ );
|
|
|
+ return;
|
|
|
}
|
|
|
let res = await checkWork();
|
|
|
if (!res.data) {
|
|
@@ -74,46 +76,56 @@ onMounted(async () => {
|
|
|
}
|
|
|
getPanoInfo().then(async (data) => {
|
|
|
store.commit("scene/setScenes", data.scenes);
|
|
|
- store.commit("scene/setPassword", data.password === "" ? false : data.password);
|
|
|
+ store.commit(
|
|
|
+ "scene/setPassword",
|
|
|
+ data.password === "" ? false : data.password
|
|
|
+ );
|
|
|
store.commit("scene/setMetaData", data);
|
|
|
- document.title = data.name || t('common.no_title')
|
|
|
+ document.title = data.name || t("common.no_title");
|
|
|
|
|
|
let firstScene = "";
|
|
|
|
|
|
-
|
|
|
if (config.sceneNum) {
|
|
|
console.log(config.sceneNum);
|
|
|
- firstScene = data.scenes.find((item) => item.sceneCode == config.sceneNum);
|
|
|
+ firstScene = data.scenes.find(
|
|
|
+ (item) => item.sceneCode == config.sceneNum
|
|
|
+ );
|
|
|
} else if (data.firstScene) {
|
|
|
- firstScene = data.scenes.find((item) => item.sceneCode == data.firstScene.sceneCode);
|
|
|
+ firstScene = data.scenes.find(
|
|
|
+ (item) => item.sceneCode == data.firstScene.sceneCode
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
-
|
|
|
store.commit("scene/setCurrentScene", firstScene || data.scenes[0]);
|
|
|
|
|
|
// 过滤空分组
|
|
|
let ttt = data.catalogRoot.filter((item) => {
|
|
|
- let flag = ''
|
|
|
+ let flag = "";
|
|
|
|
|
|
if (item.children) {
|
|
|
item.children.some((sub) => {
|
|
|
- flag = data.scenes.some(son => {
|
|
|
+ flag = data.scenes.some((son) => {
|
|
|
// console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
|
|
|
- return String(son.category).toLowerCase() == String(sub).toLowerCase()
|
|
|
- })
|
|
|
- return flag
|
|
|
+ return (
|
|
|
+ String(son.category).toLowerCase() == String(sub).toLowerCase()
|
|
|
+ );
|
|
|
+ });
|
|
|
+ return flag;
|
|
|
});
|
|
|
}
|
|
|
- return flag
|
|
|
+ return flag;
|
|
|
});
|
|
|
|
|
|
- data.catalogRoot = ttt
|
|
|
+ data.catalogRoot = ttt;
|
|
|
|
|
|
- let catalog = data.catalogs.find((item) => item.id == currentScene.value.category);
|
|
|
+ let catalog = data.catalogs.find(
|
|
|
+ (item) => item.id == currentScene.value.category
|
|
|
+ );
|
|
|
|
|
|
// 查询初始场景的所在1级分组
|
|
|
data.catalogRoot.forEach((item) => {
|
|
|
- let temp = item.children && item.children.find((sub) => sub == catalog.id);
|
|
|
+ let temp =
|
|
|
+ item.children && item.children.find((sub) => sub == catalog.id);
|
|
|
if (temp) {
|
|
|
store.commit("scene/setCurrentCatalogRoot", item);
|
|
|
return;
|
|
@@ -127,12 +139,14 @@ onMounted(async () => {
|
|
|
|
|
|
show.value = true;
|
|
|
|
|
|
- let isHavePano = data.scenes.some(item => item.type == 'pano')
|
|
|
- document.body.setAttribute('is-mobile', true)
|
|
|
+ let isHavePano = data.scenes.some((item) => item.type == "pano");
|
|
|
+ document.body.setAttribute("is-mobile", true);
|
|
|
|
|
|
const app = createApp({
|
|
|
// xml: "%HTMLPATH%/static/template/tour.xml",
|
|
|
- xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${config.projectNum}/tour.xml?rnd=${Math.random()}`,
|
|
|
+ xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${
|
|
|
+ config.projectNum
|
|
|
+ }/tour.xml?rnd=${Math.random()}`,
|
|
|
swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
|
|
|
target: "pano",
|
|
|
html5: "auto",
|
|
@@ -140,54 +154,70 @@ onMounted(async () => {
|
|
|
isHavePano,
|
|
|
vars: {
|
|
|
startscene: "scene_" + currentScene.value.sceneCode,
|
|
|
- "view.vlookat": currentScene.value.initVisual ? currentScene.value.initVisual.vlookat : 0,
|
|
|
- "view.hlookat": currentScene.value.initVisual ? currentScene.value.initVisual.hlookat : 0,
|
|
|
+ "view.vlookat": currentScene.value.initVisual
|
|
|
+ ? currentScene.value.initVisual.vlookat
|
|
|
+ : 0,
|
|
|
+ "view.hlookat": currentScene.value.initVisual
|
|
|
+ ? currentScene.value.initVisual.hlookat
|
|
|
+ : 0,
|
|
|
"autorotate.enabled": !!data.isAuto,
|
|
|
- "skin_settings.littleplanetintro": fixOpening[data.openingAnimationType || '小行星开场']
|
|
|
+ "skin_settings.littleplanetintro":
|
|
|
+ fixOpening[data.openingAnimationType || "小行星开场"],
|
|
|
},
|
|
|
passQueryParameters: true,
|
|
|
});
|
|
|
-
|
|
|
+ coverInfo.value = data.coverInfo || {};
|
|
|
app.Scene.lock();
|
|
|
- app.render();
|
|
|
+ //如果不需要开场封面就直接渲染
|
|
|
+ if (!coverInfo.value?.isShowCover) {
|
|
|
+ app.render();
|
|
|
+ }
|
|
|
|
|
|
if (isHavePano) {
|
|
|
app.Scene.on("sceneReady", () => {
|
|
|
if (app.krpanoDom) {
|
|
|
- let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`
|
|
|
+ let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
|
|
|
|
|
|
if (earthMask.value) {
|
|
|
app.krpanoDom.set(`hotspot[nadirlogo].url`, defaultMask);
|
|
|
- app.krpanoDom.set(`hotspot[nadirlogo].visible`, Boolean(earthMask.value.isShow));
|
|
|
+ app.krpanoDom.set(
|
|
|
+ `hotspot[nadirlogo].visible`,
|
|
|
+ Boolean(earthMask.value.isShow)
|
|
|
+ );
|
|
|
|
|
|
if (earthMask.value.icon) {
|
|
|
app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.value.icon);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
if (skyMask.value) {
|
|
|
app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
|
|
|
- app.krpanoDom.set(`hotspot[peaklogo].visible`, Boolean(skyMask.value.isShow));
|
|
|
+ app.krpanoDom.set(
|
|
|
+ `hotspot[peaklogo].visible`,
|
|
|
+ Boolean(skyMask.value.isShow)
|
|
|
+ );
|
|
|
if (skyMask.value.icon) {
|
|
|
app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.value.icon);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- app.krpanoDom.set(`layer[webvr_exitbutton].html`, t('common.exit_vr'));
|
|
|
-
|
|
|
+ app.krpanoDom.set(
|
|
|
+ `layer[webvr_exitbutton].html`,
|
|
|
+ t("common.exit_vr")
|
|
|
+ );
|
|
|
}
|
|
|
-
|
|
|
- let hotspots = []
|
|
|
+
|
|
|
+ let hotspots = [];
|
|
|
if (currentScene.value.someData) {
|
|
|
- hotspots = typeof currentScene.value.someData == 'string' ? JSON.parse(currentScene.value.someData).hotspots : currentScene.value.someData.hotspots
|
|
|
+ hotspots =
|
|
|
+ typeof currentScene.value.someData == "string"
|
|
|
+ ? JSON.parse(currentScene.value.someData).hotspots
|
|
|
+ : currentScene.value.someData.hotspots;
|
|
|
}
|
|
|
app.Tags.initHotspot(hotspots, false);
|
|
|
});
|
|
|
-
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
});
|
|
|
</script>
|
|
|
|