搞搞搞

src/assets/images/大都：元代北京城_files/iconfont.css

@@ -0,0 +1,483 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2947721 */
+  src: url('iconfont.woff2?t=1647573254226') format('woff2'),
+       url('iconfont.woff?t=1647573254226') format('woff'),
+       url('iconfont.ttf?t=1647573254226') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconshow_more_finish:before {
+  content: "\e67a";
+}
+
+.iconshow_more_music:before {
+  content: "\e67c";
+}
+
+.iconshow_more:before {
+  content: "\e67e";
+}
+
+.iconshow_more_vr:before {
+  content: "\e67f";
+}
+
+.icontop:before {
+  content: "\e6f3";
+}
+
+.iconeditor_play:before {
+  content: "\e6ef";
+}
+
+.iconeditor_3d:before {
+  content: "\e6f0";
+}
+
+.iconeditor_update:before {
+  content: "\e6f1";
+}
+
+.iconeditor_list_delete:before {
+  content: "\e6f2";
+}
+
+.iconmaterial_panoramic_picture:before {
+  content: "\e6e8";
+}
+
+.iconmaterial_preview_upload:before {
+  content: "\e6e9";
+}
+
+.icontoast_yellow:before {
+  content: "\e6ea";
+}
+
+.iconworks_search:before {
+  content: "\e6eb";
+}
+
+.iconworks_share:before {
+  content: "\e6ec";
+}
+
+.iconworks_look:before {
+  content: "\e6ed";
+}
+
+.iconworks_delete:before {
+  content: "\e6ee";
+}
+
+.iconeditor_folder_off:before {
+  content: "\e6c5";
+}
+
+.iconeditor_folder_on:before {
+  content: "\e6c6";
+}
+
+.iconeditor_add:before {
+  content: "\e6c7";
+}
+
+.iconeditor_hot_add:before {
+  content: "\e6c8";
+}
+
+.iconeditor_off:before {
+  content: "\e6c9";
+}
+
+.iconeditor_list_add:before {
+  content: "\e6ca";
+}
+
+.iconeditor_on:before {
+  content: "\e6cb";
+}
+
+.iconeditor_playback:before {
+  content: "\e6cc";
+}
+
+.iconeditor_list_edit:before {
+  content: "\e6cd";
+}
+
+.iconmaterial_image:before {
+  content: "\e6ce";
+}
+
+.iconmaterial_music:before {
+  content: "\e6cf";
+}
+
+.iconeditor_panoramic:before {
+  content: "\e6d0";
+}
+
+.iconeditor_list_image:before {
+  content: "\e6d1";
+}
+
+.iconmaterial_preview_drop_out:before {
+  content: "\e6d2";
+}
+
+.iconeditor_preview:before {
+  content: "\e6d3";
+}
+
+.iconeditor_search:before {
+  content: "\e6d4";
+}
+
+.iconmaterial_operation_delete:before {
+  content: "\e6d5";
+}
+
+.iconmaterial_operation_editor:before {
+  content: "\e6d6";
+}
+
+.iconeditor_return:before {
+  content: "\e6d7";
+}
+
+.iconmaterial_preview_full_screen:before {
+  content: "\e6d8";
+}
+
+.iconmaterial_preview_enlarge:before {
+  content: "\e6d9";
+}
+
+.iconeditor_save:before {
+  content: "\e6da";
+}
+
+.iconmaterial_preview_next1:before {
+  content: "\e6db";
+}
+
+.iconmaterial_preview_next:before {
+  content: "\e6dc";
+}
+
+.iconmaterial_preview_narrow:before {
+  content: "\e6dd";
+}
+
+.iconmaterial_preview_previous:before {
+  content: "\e6de";
+}
+
+.iconmaterial_operation_image:before {
+  content: "\e6df";
+}
+
+.iconmaterial_video:before {
+  content: "\e6e0";
+}
+
+.iconmaterial_preview_upload_collect:before {
+  content: "\e6e1";
+}
+
+.iconpop-ups_shut-down:before {
+  content: "\e6e2";
+}
+
+.icontoast_green:before {
+  content: "\e6e3";
+}
+
+.icontoast_red:before {
+  content: "\e6e4";
+}
+
+.iconworks_editor:before {
+  content: "\e6e5";
+}
+
+.iconpop-ups_crop:before {
+  content: "\e6e6";
+}
+
+.iconmaterial_prompt:before {
+  content: "\e6e7";
+}
+
+.iconbs_close:before {
+  content: "\e74c";
+}
+
+.iconbs_folder:before {
+  content: "\e74d";
+}
+
+.iconbs_list_menu:before {
+  content: "\e74e";
+}
+
+.iconbs_list_edit:before {
+  content: "\e74f";
+}
+
+.iconbs_list_info:before {
+  content: "\e750";
+}
+
+.iconbs_list_play:before {
+  content: "\e751";
+}
+
+.iconbs_list_stop:before {
+  content: "\e752";
+}
+
+.iconbs_plus:before {
+  content: "\e753";
+}
+
+.iconbs_reduce:before {
+  content: "\e754";
+}
+
+.iconbs_next:before {
+  content: "\e755";
+}
+
+.iconbs_nav_panorama:before {
+  content: "\e756";
+}
+
+.iconbs_upload:before {
+  content: "\e757";
+}
+
+.iconbs_search:before {
+  content: "\e758";
+}
+
+.iconbs_nav_photo:before {
+  content: "\e759";
+}
+
+.iconbs_nav_video:before {
+  content: "\e75a";
+}
+
+.iconedit_add:before {
+  content: "\e75b";
+}
+
+.iconbs_nav_sound:before {
+  content: "\e75c";
+}
+
+.iconedit_input_arrow:before {
+  content: "\e75d";
+}
+
+.iconedit_close:before {
+  content: "\e75e";
+}
+
+.iconedit_case_delete:before {
+  content: "\e75f";
+}
+
+.iconbs_share:before {
+  content: "\e760";
+}
+
+.iconedit_input_unvisible:before {
+  content: "\e761";
+}
+
+.iconedit_input_visible:before {
+  content: "\e762";
+}
+
+.iconedit_list_more:before {
+  content: "\e763";
+}
+
+.iconedit_list_default:before {
+  content: "\e764";
+}
+
+.iconedit_nav_hotpoint:before {
+  content: "\e765";
+}
+
+.iconedit_nav_base:before {
+  content: "\e766";
+}
+
+.iconedit_next:before {
+  content: "\e767";
+}
+
+.iconedit_jumpsview:before {
+  content: "\e768";
+}
+
+.iconedit_pre:before {
+  content: "\e769";
+}
+
+.iconedit_linkview:before {
+  content: "\e76a";
+}
+
+.iconedit_select:before {
+  content: "\e76b";
+}
+
+.iconedit_nav_scenenav:before {
+  content: "\e76c";
+}
+
+.iconedit_soundview:before {
+  content: "\e76d";
+}
+
+.iconedit_photoview:before {
+  content: "\e76e";
+}
+
+.iconedit_search:before {
+  content: "\e76f";
+}
+
+.iconedit_textview:before {
+  content: "\e770";
+}
+
+.iconedit_nav_screen:before {
+  content: "\e771";
+}
+
+.iconedit_type_3d:before {
+  content: "\e772";
+}
+
+.iconedit_top_save:before {
+  content: "\e773";
+}
+
+.iconedit_type_panorama:before {
+  content: "\e774";
+}
+
+.iconedit_top_view:before {
+  content: "\e775";
+}
+
+.iconedit_videoview:before {
+  content: "\e776";
+}
+
+.iconlist_views:before {
+  content: "\e777";
+}
+
+.iconnav_scene_down:before {
+  content: "\e778";
+}
+
+.icontool_about:before {
+  content: "\e779";
+}
+
+.iconnav_scene_up:before {
+  content: "\e77a";
+}
+
+.icontool_vr:before {
+  content: "\e77b";
+}
+
+.icontool_window:before {
+  content: "\e77c";
+}
+
+.icontool_full:before {
+  content: "\e77d";
+}
+
+.iconimg_logo:before {
+  content: "\e77e";
+}
+
+.iconbs_list_cover:before {
+  content: "\e77f";
+}
+
+.iconlist_delete:before {
+  content: "\e780";
+}
+
+.iconbs_stop:before {
+  content: "\e781";
+}
+
+.iconbs_play:before {
+  content: "\e782";
+}
+
+.iconbs_list_circle:before {
+  content: "\e783";
+}
+
+.iconshow_playback:before {
+  content: "\e681";
+}
+
+.iconshow_suspension:before {
+  content: "\e683";
+}
+
+.iconshow_3d_normal:before {
+  content: "\e677";
+}
+
+.iconshow_plane_normal:before {
+  content: "\e67d";
+}
+
+.iconshow_roaming_selected:before {
+  content: "\e682";
+}
+
+.iconshow_plane_selected:before {
+  content: "\e684";
+}
+
+.iconshow_3d_selected:before {
+  content: "\e685";
+}
+
+.iconshow_roaming_normal:before {
+  content: "\e686";
+}
+
+.iconshow_function_collect:before {
+  content: "\e687";
+}
+
+.iconshow_drop-down:before {
+  content: "\e673";
+}
+

src/assets/images/大都：元代北京城_files/perfect-scrollbar.css

@@ -0,0 +1,114 @@
+/*
+ * Container style
+ */
+ .ps {
+    overflow: hidden !important;
+    overflow-anchor: none;
+    -ms-overflow-style: none;
+    touch-action: auto;
+    -ms-touch-action: auto;
+  }
+  
+  /*
+   * Scrollbar rail styles
+   */
+  .ps__rail-x {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    height: 6px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps__rail-y {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    width: 6px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps--active-x > .ps__rail-x,
+  .ps--active-y > .ps__rail-y {
+    display: block;
+    opacity: 0.75;
+  }
+  
+  .ps:hover > .ps__rail-x,
+  .ps:hover > .ps__rail-y,
+  .ps--focus > .ps__rail-x,
+  .ps--focus > .ps__rail-y,
+  .ps--scrolling-x > .ps__rail-x,
+  .ps--scrolling-y > .ps__rail-y {
+    opacity: 0.85;
+  }
+  
+  .ps .ps__rail-x:hover,
+  .ps .ps__rail-y:hover,
+  .ps .ps__rail-x:focus,
+  .ps .ps__rail-y:focus,
+  .ps .ps__rail-x.ps--clicking,
+  .ps .ps__rail-y.ps--clicking {
+    opacity: 0.9;
+  }
+  
+  /*
+   * Scrollbar thumb styles
+   */
+  .ps__thumb-x {
+    background-color: rgb(98, 102, 102);
+    border-radius: 6px;
+    transition: background-color .2s linear, height .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+    height: 6px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+  
+  }
+  
+  .ps__thumb-y {
+    background-color: rgb(98, 102, 102);
+    border-radius: 6px;
+    transition: background-color .2s linear, width .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+    width: 6px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+  }
+  
+  .ps__rail-x:hover > .ps__thumb-x,
+  .ps__rail-x:focus > .ps__thumb-x,
+  .ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: rgb(153,153,153);
+  }
+  
+  .ps__rail-y:hover > .ps__thumb-y,
+  .ps__rail-y:focus > .ps__thumb-y,
+  .ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: rgb(153,153,153);
+  }
+  
+  /* MS supports */
+  @supports (-ms-overflow-style: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }
+  
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps {
+      overflow: auto !important;
+    }
+  }

src/views/PanoView.vue

@@ -225,8 +225,8 @@ const sceneList = ref([
     cameraList: [
       {
         name: '雄伟帝都',
-        panoCode: 'WK1730511898643845120',
-        // panoCode: 'WK1730428603763576832',
+        // panoCode: 'WK1730511898643845120',
+        panoCode: 'WK1730428603763576832',
         contentPageBtnNameList: [
           '整体设计与规划',
           '营都人员与机构',
@@ -353,8 +353,86 @@ window.__krfn = __krfn
 
 let scene = null
 
+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
+    )
+  }
+}
+
 function loadScene(sceneIdx, cameraIdx) {
-  scene = store.getters.catalogTopology[sceneIdx].children[0].children[0] // todo: 有问题
+  scene = store.getters.catalogTopology[sceneIdx].children[0].children[cameraIdx]
 
   $("#pano").empty()
   window.vrInitFn = () => {
@@ -382,7 +460,7 @@ function loadScene(sceneIdx, cameraIdx) {
   removepano("#pano")
   // eslint-disable-next-line no-undef
   embedpano({
-    xml: `https://4dkk.4dage.com/720yun_fd_manage/${sceneList.value[sceneIdx].cameraList[cameraIdx].panoCode}/tour.xml`,
+    xml: `https://4dkk.4dage.com/720yun_fd_manage/${scene.sceneCode}/vtour/tour.xml`,
     swf: `${process.env.BASE_URL}static/template/tour.swf`, // 文件名tour.swf没看出来有啥作用，不写也行。但它的路径决定了 %SWFPATH% 的值。
     target: "pano",
     html5: "auto",
@@ -393,9 +471,8 @@ function loadScene(sceneIdx, cameraIdx) {
 }
 
 onMounted(() => {
-  console.log()
-  api.fetchPanoData(sceneList.value[sceneIdx.value].cameraList[cameraIdx.value].panoCode).then((res) => {
-    // fixPanoData(res)
+  api.fetchPanoData('WK1730428603763576832').then((res) => {
+    fixPanoData(res)
     store.commit('setPanoData', res)
     console.log('catalogTopology', store.getters.catalogTopology)
     loadScene(Number(sceneIdx.value), Number(cameraIdx.value))
@@ -405,12 +482,7 @@ onMounted(() => {
 onBeforeRouteUpdate((to, from) => {
   console.log('to: ', to)
   if (to.name === route.name) {
-    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))
-    })
+    loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
   }
 })
 </script>