feat:update

.env.prod

@@ -1,11 +1,12 @@
 NODE_ENV=production
 VUE_APP_STATIC_DIR=showviewer
-VUE_APP_CDN=https://4dkk.4dage.com
+VUE_APP_CDN=https://ossxiaoan.4dage.com/temp_test-offline-qj/data
 VUE_APP_PROXY_URL_ROOT='https://www.4dkankan.com'
 VUE_APP_RESOURCE_URL='https://www.4dkankan.com/panorama/'
 VUE_APP_PROXY_URL='https://www.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=/qjkankan
 
+
 # 接口请求地址
 VUE_APP_APIS_URL=https://www.4dkankan.com/
-VUE_APP_DEBBUG_FLAG=0425
+VUE_APP_DEBBUG_FLAG=0425

.env.testdev

@@ -1,5 +1,5 @@
 VUE_APP_STATIC_DIR=showviewer
-VUE_APP_CDN=https://ossxiaoan.4dage.com
+VUE_APP_CDN=https://ossxiaoan.4dage.com/temp_test-offline-qj/data
 VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_RESOURCE_URL='https://test.4dkankan.com/panorama/'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode testdev",
+    "serve-prod": "vue-cli-service serve --mode prod",
     "serve-eurtestdev": "vue-cli-service serve --mode eurtestdev",
     "serve-eurdev": "vue-cli-service serve --mode eurdev",
     "build-testprod": "vue-cli-service build --mode testprod",

public/showviewer/lib/krpano/compass.xml

@@ -0,0 +1,64 @@
+<!--
+	krpano - compass example
+	- it rotates images accordingly to the viewing direction
+-->
+
+<krpano>
+
+	<!-- compass with rotating pointer -->
+	<!-- <layer name="compass1" visible="true" keep="true" url="%SWFPATH%/compass/compass_bg.png" align="righttop" x="150" y="10" children="false" scalechildren="true" destscale="1.0" onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));">
+		<layer name="compass1_plate"   url="%SWFPATH%/compass/compass_plate.png"   align="center"  zorder="1" />
+		<layer name="compass1_pointer" url="%SWFPATH%/compass/compass_pointer.png" align="center"  zorder="2" />
+		<layer name="compass1_ring"    url="%SWFPATH%/compass/compass_ring.png"    align="lefttop" zorder="3" />
+	</layer>
+	 -->
+	<!-- compass with rotating plate -->
+	<layer name="compass2" visible="true" keep="true" url="%SWFPATH%/compass/compass_bg.png" align="righttop" x="15" y="15" children="false" scalechildren="true"  scale="0.8">
+		<layer name="compass2_plate"   url="%SWFPATH%/compass/compass_plate.png"   align="center"  zorder="1" />
+		<layer name="compass2_pointer" url="%SWFPATH%/compass/compass_pointer.png" align="center"  zorder="2" />
+		<layer name="compass2_ring"    url="%SWFPATH%/compass/compass_ring.png"    align="lefttop" zorder="3" />
+	</layer>
+
+
+	<!-- view changing eeent -->
+	<events name="compass_events" keep="true" onviewchange="compass_update_rotate();" />
+	<!-- update the rotation values -->
+	<action name="compass_update_rotate">
+		trace('compass_update_rotate');
+		set(global_heading, 180);
+		calc(plugin[compass1_pointer].rotate, view.hlookat - global_heading);
+		calc(plugin[compass2_plate].rotate,  global_heading - view.hlookat);
+	</action>
+
+
+	<!-- add some hotspots -->
+	<!-- <action name="add_compass_spots" autorun="onstart">
+		showlog();
+
+		set(layer[compass2].visible,true);
+		addspot(n,  0,     0|0| 76|76, 1.0);
+		addspot(no, 45,   78|0|118|76, 0.5);
+		addspot(o,  90,  202|0| 71|76, 1.0);
+		addspot(so, 135, 281|0|109|76, 0.5);
+		addspot(s,  180, 400|0| 69|76, 1.0);
+		addspot(sw, 225, 469|0|134|76, 0.5);
+		addspot(w,  270, 603|0| 86|76, 1.0);
+		addspot(nw, 315, 689|0|141|76, 0.5);
+	</action> -->
+	
+	<!-- <action name="addspot">
+		addhotspot(%1);
+		set(hotspot[%1].url, '%SWFPATH%/compass/hotspots.png');
+		set(hotspot[%1].crop, '%3');
+		set(hotspot[%1].ath, %2);
+		set(hotspot[%1].atv, 0);
+		set(hotspot[%1].scale, %4);
+		set(hotspot[%1].scale1, %4);
+		calc(hotspot[%1].scale2, %4 * 2);
+		set(hotspot[%1].zoom,true);
+		set(hotspot[%1].onover, tween(scale,get(scale2)); );
+		set(hotspot[%1].onout, tween(scale,get(scale1)); );
+		set(hotspot[%1].onclick, lookto(get(ath),get(atv),90); );
+	</action> -->
+
+</krpano>

public/showviewer/lib/krpano/skin/vtourskin.xml

@@ -1269,7 +1269,7 @@
 
     <!-- 现行热点 -->
      <include url="%SWFPATH%/tooltip.xml" />
-
+     <include url="%SWFPATH%/compass.xml" />
    <!-- 底部logo -->
       <hotspot width="32%" name="nadirlogo" awlays="true" renderer="css3d" visible="false" keep="true" url="masking.png" ath="0" atv="90"  handcursor="false" zoom="true" height="prop" distorted="true" scale="1" rotate="0.0" />
 

public/showviewer/lib/krpano/tooltip.xml

@@ -1,7 +1,9 @@
 <krpano>
     <!-- 1.20. 新热点模式 -->
+
+	
     <action name="addJQHotspot">
-        <!-- showlog(); -->
+   
         set(hsp_name,%1); 
         set(hsp_type,%2); 
         txtadd(iconUrl,'',%4);

src/apis/index.js

@@ -25,12 +25,21 @@ const URL_FILL = config.urlFill;
  */
 export function getPanoInfo(ok, no) {
   return http.get(
-    `/data/someData.json?t=${Math.random()}`,
+    `${ossUrl}/720yun_fd_manage/${number()}/someData.json?_=${Math.random()}`,
     {},
     ok,
     no
   );
 }
+export function getOfflinePanoInfo(ok, no) {
+  return http.get(
+    `${ossUrl}/someData.json?_=${Math.random()}`,
+    {},
+    ok,
+    no
+  );
+}
+
 
 /**
  * 获取四维看看场景基本信息

src/components/Fdkk/index.vue

@@ -73,13 +73,14 @@ const rnd = ref(null);
 
 const V4IframeUrl = computed(() => {
   const v4Mi = process.env.VUE_APP_DEBBUG_V4_URL;
+  const url = process.env.VUE_APP_RESOURCE_URL
 
   if (process.env.VUE_APP_DEBBUG_V4 == 1) {
     return `${v4Mi}/${unref(isMobile) ? "smg" : "spg"}.html?m=${
       unref(currentScene).sceneCode
     }&lang=${unref(lang)}&rnd=${Math.floor(Math.random() * 100000)}`;
   } else {
-    return `${unref(isMobile) ? "smg" : "spg"}.html?m=${
+    return `${unref(isMobile) ? `${url}/smg` :`${url}/spg`}.html?m=${
       unref(currentScene).sceneCode
     }&lang=${unref(lang)}&rnd=${Math.floor(Math.random() * 100000)}`;
   }

src/components/Pano/index.vue

@@ -42,6 +42,8 @@ const loadScene = async (currentScene) => {
   console.error("loadScene", unref(currentScene).id);
   if (app.krpanoDom) {
     let { sceneCode, initVisual, someData } = currentScene;
+    // debugger
+    
     app.krpanoDom.call(
       `skin_loadscene('scene_${sceneCode}',${
         initVisual ? initVisual.vlookat : "0"
@@ -57,8 +59,8 @@ const loadScene = async (currentScene) => {
     app.krpanoDom.set(`view.limitview`, "lookat");
     app.krpanoDom.set(`view.vlookat`, vlookat || 0);
     app.krpanoDom.set(`view.hlookat`, hlookat || 0);
-    app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
-    app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+    app.krpanoDom.set(`view.vlookatmin`, vlookatmin || -90);
+    app.krpanoDom.set(`view.vlookatmax`, vlookatmax || 90);
 
     console.log("customMasks", currentScene.customMask);
     const { earth, sky } = currentScene.customMask;

src/components/assembly/Tags/metas/metas-image.vue

@@ -36,7 +36,7 @@
       </Swiper>
     </div>
 
-    <div class="toolbar">
+    <div class="toolbar"  v-if="currentTag.image">
       <i
         v-if="currentTag.image.length > 1"
         class="iconfont image-icon icon-material_preview_previous hover-tips"

src/components/guide/index.vue

@@ -0,0 +1,137 @@
+<template>
+    <Teleport to="body">
+        <div class="guide-menu">
+            <div class="guide-menu-item" @click="openlayer(0)">
+                方位图
+            </div>
+            <div class="guide-menu-item" @click="openlayer(1)">
+                总平面图
+            </div>
+            <div class="guide-menu-item" @click="openlayer(2)">
+                力量部署图
+            </div>
+            <div class="guide-menu-item" @click="openlayer(3)">
+                基本情况
+            </div>
+        </div>
+
+    </Teleport>
+
+</template>
+<script setup>
+import { ref } from 'vue';
+import { useStore } from "vuex";
+
+const store = useStore();
+const currentType = ref(0)
+
+const imageTags0 = ref({
+    hotspotType: "image",
+    hotspotTitle: "方位图",
+    image: [{
+        ossPath: require('@/assets/images/guide/1.png')
+    }]
+})
+const imageTags1 = ref({
+    hotspotType: "image",
+    hotspotTitle: "总平面图",
+    image: [{
+        ossPath: require('@/assets/images/guide/3.jpg')
+    }]
+})
+
+const imageTags2 = ref({
+    hotspotType: "image",
+    hotspotTitle: "力量部署图",
+    image: [{
+        ossPath: require('@/assets/images/guide/2.png')
+    }]
+})
+
+const textTags3 = ref({
+    hotspotTitle: "基本情况",
+    hotspotType: "textarea",
+    textarea: '<P style="font-size:16px;">南华大学附属第一医院位于湖南省衡阳市船山路69号，占地面积124.99亩，创建于1943年，是一所集医疗、教学、科研、预防、康复于一体的三级综合医院。院内拥有多栋中高层建筑物，其中院内室外消防栓共11个，水泵房3个，消防控制室1个。</p> ',
+
+})
+
+const isLayerOpen = ref(false);
+
+const openlayer = (type) => {
+    switch (type) {
+        case 0:
+            store.commit("tags/setCurrentTag", imageTags0.value);
+            currentType.value = 0
+            break;
+        case 1:
+            store.commit("tags/setCurrentTag", imageTags1.value);
+            currentType.value = 0
+            break;
+        case 2:
+            store.commit("tags/setCurrentTag", imageTags2.value);
+            currentType.value = 0
+            break;
+        case 3:
+            store.commit("tags/setCurrentTag", textTags3.value);
+            currentType.value = 1
+            break;
+        default:
+            break;
+    }
+    setTimeout(isLayerOpen.value = true, 100)
+
+}
+
+</script>
+<style lang="scss">
+.guide-menu {
+    position: fixed;
+    height: 100vh;
+    width: 100px;
+    top: 0;
+    left: 30px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 90px 0;
+
+    .guide-menu-item {
+        background: rgba(0, 0, 0, 0.8);
+        width: 100%;
+        height: 60px;
+        border-radius: 10px;
+        color: white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+}
+
+.guide-layer {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10000;
+    top: 0;
+    position: fixed;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(10px);
+
+    .content {
+        max-width: 100%;
+    }
+
+    .close {
+        width: 50px;
+        height: 50px;
+        top: 30px;
+        right: 30px;
+        position: absolute;
+        cursor: pointer;
+    }
+
+}
+</style>

src/pages/show.vue

@@ -9,6 +9,7 @@
       <Tags />
       <UiGather />
       <TitieSlide />
+      <Guide />
     </div>
   </template>
 
@@ -30,8 +31,10 @@ import Opening from "@/components/assembly/Opening";
 import { createApp } from "@/app";
 import { Dialog } from "@/global_components";
 
+import Guide from "@/components/guide";
+
 import { ref, onMounted, computed, watch, nextTick, unref } from "vue";
-import { getPanoInfo, checkWork, exchangeId } from "@/apis";
+import { getOfflinePanoInfo, checkWork, exchangeId } from "@/apis";
 import { useStore } from "vuex";
 import config from "@/utils/config";
 import browser from "@/utils/browser";
@@ -67,7 +70,7 @@ onMounted(async () => {
     return;
   }
 
-  getPanoInfo().then(async (data) => {
+  getOfflinePanoInfo().then(async (data) => {
     isShowOpeningAnimation.value = data.isShowOpeningAnimation
       ? Number(data.isShowOpeningAnimation)
       : 0;
@@ -154,13 +157,11 @@ onMounted(async () => {
     show.value = true;
 
     let isHavePano = data.scenes.some((item) => item.type == "pano");
-    console.log('projectNum',config)
+    console.log('projectNum', config)
 
 
     const app = createApp({
-      // xml: "%HTMLPATH%/static/template/tour.xml",
-      xml: `/data/${config.sceneNum
-        }/vtour/tour.xml?rnd=${Math.random()}`,
+      xml: `data/tour/tour.xml?rnd=${Math.random()}`,
       swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
       target: "pano",
       html5: "auto",
@@ -232,8 +233,8 @@ const handleVisualLimit = (app, currentScene) => {
   const { vlookatmax, vlookatmin } = currentScene.initVisual;
   // console.log('initVisual',currentScene.initVisual)
   app.krpanoDom.set(`view.limitview`, "lookat");
-  app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
-  app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+  app.krpanoDom.set(`view.vlookatmin`, vlookatmin || -90);
+  app.krpanoDom.set(`view.vlookatmax`, vlookatmax || 90);
 };
 
 const handleMasksUpdate = (skyMask, earthMask, app) => {

src/pages/showMobile.vue

@@ -1,10 +1,7 @@
 <template>
   <LoadingLogo v-if="workEnable" />
   <template v-if="workEnable">
-    <Opening
-      :coverData="coverInfo"
-      v-if="coverInfo.isShowCover && !hasPasswordLock"
-    />
+    <Opening :coverData="coverInfo" v-if="coverInfo.isShowCover && !hasPasswordLock" />
     <Password @pass="handlePass" />
     <Share />
     <div class="ui-view-layout" :class="{ show: show }">
@@ -39,7 +36,7 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { getPanoInfo, checkWork, exchangeId } from "@/apis";
+import { getOfflinePanoInfo, checkWork, exchangeId } from "@/apis";
 import { useStore } from "vuex";
 import config from "@/utils/config";
 import browser from "@/utils/browser";
@@ -86,27 +83,9 @@ onMounted(async () => {
     );
     return;
   }
-  const idRes = await exchangeId({
-    id: config.projectNum
-  })
-  const { id, num, calcStatus } = idRes.data
-  config.projectNum = id
-
-  if (calcStatus === 0) {
-    Dialog.alert({
-      title: t("common.tips"),
-      content: t('common.calcing'),
-      okText: t("common.confirm"),
-    });
-    return
-  }
 
-  let res = await checkWork();
-  if (!res.data) {
-    workEnable.value = res.data;
-    return;
-  }
-  getPanoInfo().then(async (data) => {
+
+  getOfflinePanoInfo().then(async (data) => {
     isShowOpeningAnimation.value = data.isShowOpeningAnimation
       ? Number(data.isShowOpeningAnimation)
       : 0;
@@ -199,10 +178,7 @@ onMounted(async () => {
     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: `data/tour/tour.xml?rnd=${Math.random()}`,
       swf: "%HTMLPATH%/showviewer/lib/krpano/tour.swf",
       target: "pano",
       html5: "auto",
@@ -270,8 +246,8 @@ const handleVisualLimit = (app, currentScene) => {
   const { vlookatmax, vlookatmin } = currentScene.initVisual;
   // console.log('initVisual',currentScene.initVisual)
   app.krpanoDom.set(`view.limitview`, "lookat");
-  app.krpanoDom.set(`view.vlookatmin`, vlookatmin);
-  app.krpanoDom.set(`view.vlookatmax`, vlookatmax);
+  app.krpanoDom.set(`view.vlookatmin`, vlookatmin || -90);
+  app.krpanoDom.set(`view.vlookatmax`, vlookatmax || 90);
 };
 const handleMasksUpdate = (skyMask, earthMask, app) => {
   const lang = getLocale();

src/utils/config.js

@@ -9,8 +9,8 @@ const config = {
   thumb: require("@/assets/images/default/img_cover_default.jpg"),
   noresult: require("@/assets/images/default/img_noresults@2x.png"),
   empty: require("@/assets/images/default/img_empty@2x.png"),
-  projectNum: "WK1792459279224066048",
-  sceneNum: "fd720_0y6y0BXZQ",
+  projectNum: browser.urlQueryValue('id'),
+  sceneNum: browser.urlQueryValue('vr'),
   lang: browser.urlQueryValue("lang") || "zh",
   CDN: process.env.VUE_APP_CDN,
   fdkkURL: process.env.VUE_APP_PROXY_URL_ROOT + "/",