showMobile.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <template>
  2. <LoadingLogo v-if="workEnable" />
  3. <template v-if="workEnable">
  4. <Opening
  5. :coverData="coverInfo"
  6. v-if="coverInfo.isShowCover && !hasPasswordLock"
  7. />
  8. <Password @pass="handlePass" />
  9. <Share />
  10. <div class="ui-view-layout" :class="{ show: show }">
  11. <Pano />
  12. <Tags />
  13. <UiGather />
  14. <TitieSlide />
  15. </div>
  16. </template>
  17. <Error v-else />
  18. </template>
  19. <script setup>
  20. import Pano from "@/components/Pano";
  21. import Tags from "@/components/assembly/MobileTags";
  22. import Password from "@/components/assembly/Password";
  23. import Share from "@/components/assembly/Share";
  24. import Error from "@/components/assembly/Error";
  25. import UiGather from "@/components/UIGather/mobile";
  26. import TitieSlide from "@/components/assembly/titieSlide";
  27. import Opening from "@/components/assembly/OpeningMobile";
  28. import LoadingLogo from "@/components/assembly/Loading";
  29. import { createApp } from "@/app";
  30. import { ref, onMounted, computed, unref, watch, nextTick } from "vue";
  31. import { getPanoInfo, checkWork } from "@/apis";
  32. import { useStore } from "vuex";
  33. import config from "@/utils/config";
  34. import browser from "@/utils/browser";
  35. import { useApp } from "@/app";
  36. import { useI18n, getLocale } from "@/i18n";
  37. const { t } = useI18n({ useScope: "global" });
  38. const coverInfo = ref({});
  39. const fixOpening = {
  40. 小行星开场: 1,
  41. 水平巡游开场: 2,
  42. 小行星巡游开场: 3,
  43. 水晶球开场: 4,
  44. 小行星缩放开场: 5,
  45. };
  46. // 需要限制视角可变范围的场景
  47. let noLittleIds = ['WK1656467989114929152','WK1656904911083814912','WK1656877437742497792', 'WK1666378820984242176', 'WK1666379589867274240']
  48. const store = useStore();
  49. const show = ref(false);
  50. const workEnable = ref(true);
  51. const lang = getLocale();
  52. const hasPasswordLock = ref(false);
  53. const currentScene = computed(() => store.getters["scene/currentScene"]);
  54. const currentCatalogRoot = computed(
  55. () => store.getters["scene/currentCatalogRoot"]
  56. );
  57. const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
  58. const earthMask = computed(() => store.getters["scene/earthMask"]);
  59. const skyMask = computed(() => store.getters["scene/skyMask"]);
  60. const isShowOpeningAnimation = ref(0);
  61. onMounted(async () => {
  62. // if (!browser.isMobile()) {
  63. // window.location.href = window.location.href.replace(
  64. // "showMobile.html",
  65. // "show.html"
  66. // );
  67. // return;
  68. // }
  69. let res = await checkWork();
  70. if (!res.data) {
  71. workEnable.value = res.data;
  72. return;
  73. }
  74. getPanoInfo().then(async (data) => {
  75. isShowOpeningAnimation.value = Number(data.isShowOpeningAnimation);
  76. store.commit("scene/setScenes", data.scenes);
  77. store.commit(
  78. "scene/setPassword",
  79. data.password === "" ? false : data.password
  80. );
  81. if (data.password.length > 0) {
  82. hasPasswordLock.value = true;
  83. }
  84. store.commit("scene/setMetaData", data);
  85. document.title = data.name || t("common.no_title");
  86. //所有热点
  87. let temphotspots = [];
  88. data.scenes.forEach(item=>{
  89. if (item.someData) {
  90. temphotspots = temphotspots.concat(typeof item.someData == "string"
  91. ? JSON.parse(item.someData).hotspots
  92. : item.someData.hotspots)
  93. }
  94. })
  95. store.commit("tags/setAllHotList", temphotspots);
  96. let firstScene = "";
  97. if (config.sceneNum) {
  98. console.log(config.sceneNum);
  99. firstScene = data.scenes.find(
  100. (item) => item.sceneCode == config.sceneNum
  101. );
  102. } else if (data.firstScene) {
  103. firstScene = data.scenes.find(
  104. (item) => item.sceneCode == data.firstScene.sceneCode
  105. );
  106. }
  107. store.commit("scene/setCurrentScene", firstScene || data.scenes[0]);
  108. // 过滤空分组
  109. let ttt = data.catalogRoot.filter((item) => {
  110. let flag = "";
  111. if (item.children) {
  112. item.children.some((sub) => {
  113. flag = data.scenes.some((son) => {
  114. // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
  115. return (
  116. String(son.category).toLowerCase() == String(sub).toLowerCase()
  117. );
  118. });
  119. return flag;
  120. });
  121. }
  122. return flag;
  123. });
  124. data.catalogRoot = ttt;
  125. let catalog = data.catalogs.find(
  126. (item) => item.id == currentScene.value.category
  127. );
  128. // 查询初始场景的所在1级分组
  129. data.catalogRoot.forEach((item) => {
  130. let temp =
  131. item.children && item.children.find((sub) => sub == catalog.id);
  132. if (temp) {
  133. store.commit("scene/setCurrentCatalogRoot", item);
  134. return;
  135. }
  136. });
  137. // 查询初始场景的所在2级分组
  138. store.commit("scene/setCurrentSecondary", catalog);
  139. store.commit("functions/setAutoRotate", !!data.isAuto);
  140. show.value = true;
  141. let isHavePano = data.scenes.some((item) => item.type == "pano");
  142. document.body.setAttribute("is-mobile", true);
  143. const app = createApp({
  144. // xml: "%HTMLPATH%/static/template/tour.xml",
  145. xml: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${
  146. config.projectNum
  147. }/tour.xml?rnd=${Math.random()}`,
  148. swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
  149. target: "pano",
  150. html5: "auto",
  151. mobilescale: 1,
  152. isHavePano,
  153. vars: {
  154. startscene: "scene_" + currentScene.value.sceneCode,
  155. "view.vlookat": currentScene.value.initVisual
  156. ? currentScene.value.initVisual.vlookat
  157. : 0,
  158. "view.hlookat": currentScene.value.initVisual
  159. ? currentScene.value.initVisual.hlookat
  160. : 0,
  161. "autorotate.enabled": !!data.isAuto,
  162. "skin_settings.littleplanetintro":
  163. fixOpening[data.openingAnimationType || "小行星开场"],
  164. // "skin_settings.lptswitch": unref(isShowOpeningAnimation),
  165. "skin_settings.lptswitch": !noLittleIds.includes(config.projectNum),
  166. },
  167. passQueryParameters: true,
  168. });
  169. coverInfo.value = data.coverInfo || {};
  170. app.Scene.lock();
  171. //如果不需要开场封面就直接渲染
  172. if (!coverInfo.value?.isShowCover) {
  173. app.render();
  174. }
  175. if (isHavePano) {
  176. app.Scene.on("sceneReady", () => {
  177. if (app.krpanoDom) {
  178. let defaultMask = `%SWFPATH%/skin/masking_${lang}.png`;
  179. if (noLittleIds.includes(config.projectNum)) {
  180. app.krpanoDom.set(`view.vlookatmin`, 0);
  181. app.krpanoDom.set(`view.vlookatmax`, 0);
  182. app.krpanoDom.set(`view.limitview`, 'lookat');
  183. app.krpanoDom.set(`view.fovmax`, 140);
  184. }
  185. if (earthMask.value) {
  186. app.krpanoDom.set(`hotspot[nadirlogo].url`, defaultMask);
  187. app.krpanoDom.set(
  188. `hotspot[nadirlogo].visible`,
  189. Boolean(earthMask.value.isShow)
  190. );
  191. if (earthMask.value.icon) {
  192. app.krpanoDom.set(`hotspot[nadirlogo].url`, earthMask.value.icon);
  193. }
  194. }
  195. if (skyMask.value) {
  196. app.krpanoDom.set(`hotspot[peaklogo].url`, defaultMask);
  197. app.krpanoDom.set(
  198. `hotspot[peaklogo].visible`,
  199. Boolean(skyMask.value.isShow)
  200. );
  201. if (skyMask.value.icon) {
  202. app.krpanoDom.set(`hotspot[peaklogo].url`, skyMask.value.icon);
  203. }
  204. }
  205. app.krpanoDom.set(
  206. `layer[webvr_exitbutton].html`,
  207. t("common.exit_vr")
  208. );
  209. }
  210. let hotspots = [];
  211. if (currentScene.value.someData) {
  212. hotspots =
  213. typeof currentScene.value.someData == "string"
  214. ? JSON.parse(currentScene.value.someData).hotspots
  215. : currentScene.value.someData.hotspots;
  216. }
  217. app.Tags.initHotspot(hotspots, false);
  218. });
  219. }
  220. });
  221. });
  222. const handlePass = () => {
  223. hasPasswordLock.value = false;
  224. };
  225. </script>
  226. <style lang="scss" scoped>
  227. .ui-view-layout {
  228. position: relative;
  229. }
  230. </style>