sbwy

.env.mytest

@@ -1,3 +1,3 @@
 VUE_APP_CLI_MODE=test
 NODE_ENV=production
-PUBLIC_PATH=./
+PUBLIC_PATH=/

.env.prod

@@ -1,3 +1,3 @@
 VUE_APP_CLI_MODE=prod
 NODE_ENV=production
-PUBLIC_PATH=./
+PUBLIC_PATH=/

src/App.vue

@@ -9,90 +9,6 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useStore } from "vuex"
 
 const store = useStore()
-
-function fixPanoData(panoData) {
-  // 丢弃没有包含场景的二级分组
-  let tmp = []
-  panoData.scenes.forEach((item) => {
-    panoData.catalogs.forEach((sub) => {
-      if (item.category == sub.id) {
-        if (tmp.indexOf(sub) < 0) {
-          tmp.push(sub)
-        }
-      }
-    })
-  })
-  tmp = utils.unique(tmp)
-  panoData.catalogs = tmp
-
-  // 丢弃没有包含二级分组的一级分组
-  let rootmp = []
-  tmp.forEach((item) => {
-    panoData.catalogRoot.forEach((sub) => {
-      sub.children = utils.unique(sub.children)
-
-      if (sub.children.indexOf(item.id) > -1) {
-        rootmp.push(sub)
-      }
-    })
-  })
-  rootmp = utils.unique(rootmp)
-
-  // 一级分组按名称排序
-  let sortArr = panoData.catalogRoot.map((item) => item.name)
-  rootmp.sort((a, b) => {
-    return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
-  })
-
-  // 各个一级分组的children去重，只留下有实际的二级分组相对应的那些children item。
-  panoData.catalogRoot = rootmp.map((item) => {
-    let temp = []
-    item.children = utils.unique(item.children)
-    item.children.forEach((sub) => {
-      tmp.forEach((jj) => {
-        if (jj.id == sub) {
-          temp.push(sub)
-        }
-      })
-    })
-    return {
-      ...item,
-      children: temp,
-    }
-  })
-
-  // 多余
-  panoData.catalogs = tmp
-
-  // 如果没有一级分组（一定也就没有二级分组）就创建一级分组和二级分组 有必要吗？
-  let cid = "c_" + utils.randomWord(true, 8, 8)
-  if (panoData.catalogRoot.length <= 0) {
-    panoData.catalogRoot.push({
-      id: "r_" + utils.randomWord(true, 8, 8),
-      name: "全部场景",
-      children: [cid],
-    })
-  }
-  if (panoData.catalogs.length <= 0) {
-    panoData.catalogs.push({
-      id: cid,
-      name: "默认二级分组",
-    })
-  }
-
-  // 如果有初始场景，改为引用场景列表中对应的那个场景的js对象
-  if (panoData.firstScene) {
-    panoData.firstScene = panoData.scenes.find(
-      (item) => item.sceneCode == panoData.firstScene.sceneCode
-    )
-  }
-}
-
-api.fetchPanoData().then((res) => {
-  fixPanoData(res)
-  store.commit('setPanoData', res)
-  console.log('catalogTopology', store.getters.catalogTopology)
-})
 </script>
 
 <style lang="less">

src/api.js

@@ -15,10 +15,10 @@ import axios from "axios"
 // })
 
 export default {
-  async fetchPanoData() {
+  async fetchPanoData(panoCode) {
     const res = await axios({
       method: 'get',
-      url: `https://4dkk.4dage.com/720yun_fd_manage/WK1729684587681992704/someData.json?_=${Math.random()}`,
+      url: `https://4dkk.4dage.com/720yun_fd_manage/${panoCode}/someData.json?_=${Math.random()}`,
     })
     console.log('fetch pano data: ', res.data)
 

src/components/CameraContent-1-1-1.vue

@@ -451,7 +451,7 @@ const displayingHotspotIdx = ref(0)
       top: 0;
       width: 100%;
       height: 100%;
-      background-image: url(@/assets/images/camera-content-1-1-1-layout-bg.jpg);
+      background-image: url(@/assets/images/camera-content-1-1-1-layout-bg.png);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       background-position: center center;

src/components/StartUp.vue

@@ -163,7 +163,7 @@ watch(haveShownStartUp, (v) => {
     position: absolute;
     left: 0;
     bottom: 0;
-    width: 100vw;
+    width: 90vw;
   }
   >.video-wrap{
     position: absolute;
@@ -178,6 +178,7 @@ watch(haveShownStartUp, (v) => {
       width: 100%;
       height: 100%;
       background-color: black;
+      object-fit: cover;
     }
     >button.skip{
       position: absolute;

src/views/PanoView.vue

@@ -233,6 +233,7 @@ const sceneList = ref([
     cameraList: [
       {
         name: '雄伟帝都',
+        panoCode: 'WK1729684587681992704',
         contentPageBtnNameList: [
           '整体设计与规划',
           '营都人员与机构',
@@ -241,6 +242,7 @@ const sceneList = ref([
       },
       {
         name: '大都宫阙',
+        panoCode: 'WK1730165377477955584',
         contentPageBtnNameList: [
           '皇城与宫城',
           '皇城内的建筑布局',
@@ -248,7 +250,8 @@ const sceneList = ref([
         ],
       },
       {
-        name: '大都揽胜',
+        name: '大都览胜',
+        panoCode: 'WK1730164600466362368',
         contentPageBtnNameList: [
           '大都城内的寺庙建筑',
           '大都城内的官署机构',
@@ -313,28 +316,28 @@ const currentCameraList = computed(() => {
 })
 
 const btnOnTrack1ImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
 })
 const btnOnTrack1ActiveImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
 })
 const btnOnTrack2ImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
 })
 const btnOnTrack2ActiveImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
 })
 const btnOnTrack3ImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
 })
 const btnOnTrack3ActiveImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
 })
 const btnOnTrack4ImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4.png`) + ')'
 })
 const btnOnTrack4ActiveImgUrl = computed(() => {
-  return 'url(' + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.png`) + ')'
+  return `url(` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-4-active.png`) + ')'
 })
 
 const btnOnTrack1Name = computed(() => {
@@ -385,7 +388,7 @@ function loadScene(sceneIdx, cameraIdx) {
   removepano("#pano")
   // eslint-disable-next-line no-undef
   embedpano({
-    xml: `https://4dkk.4dage.com/720yun_fd_manage/WK1729684587681992704/tour.xml`,
+    xml: `https://4dkk.4dage.com/720yun_fd_manage/${sceneList.value[sceneIdx].cameraList[cameraIdx].panoCode}/tour.xml`,
     swf: `${process.env.BASE_URL}static/template/tour.swf`, // 文件名tour.swf没看出来有啥作用，不写也行。但它的路径决定了 %SWFPATH% 的值。
     target: "pano",
     html5: "auto",
@@ -396,15 +399,24 @@ function loadScene(sceneIdx, cameraIdx) {
 }
 
 onMounted(() => {
-  // nextTick(() => {
-  loadScene(Number(route.query.sceneIdx), Number(route.query.cameraIdx))
-  // })
+  console.log()
+  api.fetchPanoData(sceneList.value[sceneIdx.value].cameraList[cameraIdx.value].panoCode).then((res) => {
+    // fixPanoData(res)
+    store.commit('setPanoData', res)
+    console.log('catalogTopology', store.getters.catalogTopology)
+    loadScene(Number(sceneIdx.value), Number(cameraIdx.value))
+  })
 })
 
 onBeforeRouteUpdate((to, from) => {
   console.log('to: ', to)
   if (to.name === route.name) {
-    loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
+    api.fetchPanoData(sceneList.value[to.query.sceneIdx].cameraList[to.query.cameraIdx].panoCode).then((res) => {
+      // fixPanoData(res)
+      store.commit('setPanoData', res)
+      console.log('catalogTopology', store.getters.catalogTopology)
+      loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
+    })
   }
 })
 </script>
@@ -527,9 +539,9 @@ onBeforeRouteUpdate((to, from) => {
     }
     >img.btn-track{
       position: absolute;
-      width: 450px;
+      width: 598px;
       height: 598px;
-      left: -52px;
+      left: -150px;
       bottom: -101px;
     }
     >button.btn-on-track{
@@ -554,7 +566,7 @@ onBeforeRouteUpdate((to, from) => {
       &:hover{
         width: 397px;
         height: 91px;
-        transform: translate(-10px);
+        transform: translate(-13px, -5px);
         >span{
           display: initial;
         }
@@ -562,14 +574,14 @@ onBeforeRouteUpdate((to, from) => {
     }
     >button.one{
       left: 210px;
-      top: -39px;
+      top: -42px;
       background-image: v-bind(btnOnTrack1ImgUrl);
       &:hover{
         background-image: v-bind(btnOnTrack1ActiveImgUrl);
       }
     }
     >button.two{
-      left: 306px;
+      left: 336px;
       top: 62px;
       background-image: v-bind(btnOnTrack2ImgUrl);
       &:hover{
@@ -577,7 +589,7 @@ onBeforeRouteUpdate((to, from) => {
       }
     }
     >button.three{
-      left: 340px;
+      left: 385px;
       top: 205px;
       background-image: v-bind(btnOnTrack3ImgUrl);
       &:hover{
@@ -585,7 +597,7 @@ onBeforeRouteUpdate((to, from) => {
       }
     }
     >button.four{
-      left: 314px;
+      left: 352px;
       top: 353px;
       background-image: v-bind(btnOnTrack4ImgUrl);
       &:hover{

src/views/temp.js

@@ -0,0 +1,78 @@
+function fixPanoData(panoData) {
+  // 丢弃没有包含场景的二级分组
+  let tmp = []
+  panoData.scenes.forEach((item) => {
+    panoData.catalogs.forEach((sub) => {
+      if (item.category == sub.id) {
+        if (tmp.indexOf(sub) < 0) {
+          tmp.push(sub)
+        }
+      }
+    })
+  })
+  tmp = utils.unique(tmp)
+  panoData.catalogs = tmp
+
+  // 丢弃没有包含二级分组的一级分组
+  let rootmp = []
+  tmp.forEach((item) => {
+    panoData.catalogRoot.forEach((sub) => {
+      sub.children = utils.unique(sub.children)
+
+      if (sub.children.indexOf(item.id) > -1) {
+        rootmp.push(sub)
+      }
+    })
+  })
+  rootmp = utils.unique(rootmp)
+
+  // 一级分组按名称排序
+  let sortArr = panoData.catalogRoot.map((item) => item.name)
+  rootmp.sort((a, b) => {
+    return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
+  })
+
+  // 各个一级分组的children去重，只留下有实际的二级分组相对应的那些children item。
+  panoData.catalogRoot = rootmp.map((item) => {
+    let temp = []
+    item.children = utils.unique(item.children)
+    item.children.forEach((sub) => {
+      tmp.forEach((jj) => {
+        if (jj.id == sub) {
+          temp.push(sub)
+        }
+      })
+    })
+    return {
+      ...item,
+      children: temp,
+    }
+  })
+
+  // 多余
+  panoData.catalogs = tmp
+
+  // 如果没有一级分组（一定也就没有二级分组）就创建一级分组和二级分组 有必要吗？
+  let cid = "c_" + utils.randomWord(true, 8, 8)
+  if (panoData.catalogRoot.length <= 0) {
+    panoData.catalogRoot.push({
+      id: "r_" + utils.randomWord(true, 8, 8),
+      name: "全部场景",
+      children: [cid],
+    })
+  }
+  if (panoData.catalogs.length <= 0) {
+    panoData.catalogs.push({
+      id: cid,
+      name: "默认二级分组",
+    })
+  }
+
+  // 如果有初始场景，改为引用场景列表中对应的那个场景的js对象
+  if (panoData.firstScene) {
+    panoData.firstScene = panoData.scenes.find(
+      (item) => item.sceneCode == panoData.firstScene.sceneCode
+    )
+  }
+}
+