Merge branch 'gugong1.0' of http://192.168.0.115:3000/xingjinxing/ggbwy_onlineTour into gugong1.0

scene/src/store/index.js

@@ -5,12 +5,16 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
+    panoId: 0,
     points: null,
   },
   getters: {
     points(state) {
       return state.points;
     },
+    panoId(state) {
+      return state.panoId;
+    },
   },
   mutations: {
     setData(state, payload) {
@@ -18,6 +22,12 @@ const store = new Vuex.Store({
         state[key] = payload[key];
       }
     },
+    setPanoOver(state, id) {
+      state.panoId = id;
+      if (state.points && !state.points[id]?.over) {
+        state.points[id].over = true;
+      }
+    },
   },
   actions: {},
   modules: {},

scene/src/views/gui/components/layerMap.vue

@@ -106,14 +106,16 @@ import { mapGetters, mapMutations } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
+  // props: ["points"],
   data() {
     //这里存放数据
-    return { unit: 0, mapScale: 1, panoId: player.currentPano.id };
+    return { unit: 0, mapScale: 1 };
   },
   //监听属性 类似于data概念
   computed: {
     ...mapGetters({
       points: "points",
+      panoId: "panoId",
     }),
   },
   //监控data中的数据变化
@@ -124,21 +126,21 @@ export default {
     goPano(id) {
       player.flyToPano({ pano: player.model.panos.get(id) });
       this.panoId = id;
-      if (!this.points[id].over) {
-        this.points[id].over = true;
-      }
+      // if (!this.points[id].over) {
+      //   this.points[id].over = true;
+      // }
     },
-    getPoints() {
-      // let w = 633,
-      //   h = 965;
-      let w = 665,
-        h = 963;
-      let points = manage.initMapPanoPos(w, h);
+    // getPoints() {
+    //   // let w = 633,
+    //   //   h = 965;
+    //   let w = 665,
+    //     h = 963;
+    //   let points = manage.initMapPanoPos(w, h);
 
-      if (!this.points) {
-        this.setData({ points });
-      }
-    },
+    //   if (!this.points) {
+    //     this.setData({ points });
+    //   }
+    // },
     initPicSize() {
       try {
         let refW = this.$refs.mapEle.getBoundingClientRect().width;
@@ -165,7 +167,7 @@ export default {
     window.addEventListener("resize", this.initPicSize);
     this.$nextTick(() => {
       this.initPicSize();
-      this.getPoints();
+      // this.getPoints();
       // let overList = sessionStorage.getItem("overList");
       // if (overList) {
       //   this.overList = JSON.parse(overList);
@@ -257,10 +259,11 @@ export default {
           width: 805px;
           height: 1064px;
           transform: translate(-50%, -50%) scale(0.58);
-          background-image: url(../../../assets/image/icon/new-icon/test1.jpg);
+          background-image: url(../../../assets/image/icon/new-icon/map.jpg);
           position: absolute;
           left: 50%;
           top: 50%;
+          overflow: hidden;
           .map-svg {
             left: 70px;
             top: 61px;

scene/src/views/gui/components/tourList.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="swcon" v-swiper:mySwiper="swiperOption">
       <ul class="swiper-wrapper swiper-wrapper-n">
-        <div class="swiper-slide" v-for="(i, index) in tourList">
+        <div class="swiper-slide" v-for="(i, index) in tourList" :class="{ active: i.heroLocations[0].panoId == panoId }">
           <img :src="i.heroLocations[0].thumbUrl" alt="" />
           <div class="sl-item" :data-v="JSON.stringify(i)">
             <span>{{ i.heroLocations[0].name }}</span>
@@ -22,6 +22,7 @@
 import ClickOutside from "vue-click-outside";
 import { directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
+import { mapGetters, mapMutations } from "vuex";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {},
@@ -33,6 +34,9 @@ export default {
   },
   //监听属性 类似于data概念
   computed: {
+    ...mapGetters({
+      panoId: "panoId",
+    }),
     swiperOption() {
       let that = this;
       return {
@@ -68,7 +72,6 @@ export default {
   //方法集合
   methods: {
     goScene(item) {
-      console.error(1);
       // let { panoId, quaternion } = heroLocation;
       // // player.model.heroLocations里的那些item
       // player.flyToPano({ pano: player.model.panos.get(panoId), quaternion });

scene/src/views/gui/menu.vue

@@ -72,7 +72,7 @@
       </div>
     </div>
 
-    <div v-show="!hideTools" class="pinBottom right hideTarget">
+    <div v-show="!hideTools && false" class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
         <!-- 楼层，内外 -->
         <div class="gui-floor" v-show="false">
@@ -116,8 +116,8 @@
           <!-- 鼠标移入的显示 -->
           <div class="hoverTit">{{ musicState ? "关闭" : "打开" }}音乐</div>
           <div>
-            <img id="openMusic" style="display: block" @click="switchBGM(true)" src="../../assets/img/musicAc.png" alt="" />
-            <img id="closeMusic" style="display: none" @click="switchBGM(false)" src="../../assets/img/music.png" alt="" />
+            <!-- <img id="openMusic" style="display: block" @click="switchBGM(true)" src="../../assets/img/musicAc.png" alt="" />
+            <img id="closeMusic" style="display: none" @click="switchBGM(false)" src="../../assets/img/music.png" alt="" /> -->
           </div>
         </div>
         <!-- 分享 -->
@@ -153,8 +153,8 @@
     <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
       <div v-show="openType != 'immersive'" class="right-btn">
         <div id="bgm" class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons">
-          <img class="normal" v-if="musicState" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
-          <img class="active" v-else :src="i.activeIcon" alt="" @click="switchBGM(true)" />
+          <img class="normal" id="openMusic" :src="i.normalIcon" alt="" @click="switchBGM(false)" />
+          <img class="active" id="closeMusic" :src="i.activeIcon" alt="" @click="switchBGM(true)" />
           <div class="tip-box">{{ i.name }}</div>
         </div>
       </div>
@@ -180,7 +180,7 @@
       <TourList :tourList="tourList" v-if="openType == 'tour'" @close="openType = null"> </TourList>
     </transition>
     <transition name="fade" enter-active-class="animate__animated animate__fadeIn animate__faster" leave-active-class="animate__animated animate__fadeOut animate__faster">
-      <LayerMap v-if="openType == 'map'" @close="openType = null"> </LayerMap>
+      <LayerMap v-if="openType == 'map'" :points="points" @close="openType = null"> </LayerMap>
     </transition>
   </div>
 </template>
@@ -192,6 +192,7 @@ import LayerMap from "./components/layerMap.vue";
 import Share from "./components/share.vue";
 import { directive } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
+import { mapGetters, mapMutations } from "vuex";
 export default {
   components: { HotList, TourList, LayerMap, Share },
   directives: {
@@ -267,7 +268,11 @@ export default {
     };
   },
   watch: {},
-  computed: {},
+  computed: {
+    ...mapGetters({
+      points: "points",
+    }),
+  },
   mounted() {
     let events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
     events.forEach((item, index) => {
@@ -284,12 +289,29 @@ export default {
         player.on("flying.ended", () => {
           this.mode = player.mode;
         });
+        player.on("pano.chosen", (oldPano, newPano) => {
+          let { id } = newPano;
+          this.setPanoOver(id);
+        });
+        this.getPoints();
       });
     };
     initListener();
     // this.tourList = window.player ? player?.model?.heroLocations : [];
   },
   methods: {
+    ...mapMutations(["setData", "setPanoOver"]),
+    getPoints() {
+      // let w = 633,
+      //   h = 965;
+      let w = 665,
+        h = 963;
+      let points = manage.initMapPanoPos(w, h);
+
+      if (!this.points) {
+        this.setData({ points });
+      }
+    },
     goScene(type) {
       player.guider2.go(type);
     },
@@ -410,16 +432,16 @@ export default {
       if (flag) {
         this.musicState = true;
         window.manage.switchBgmState(this.musicState);
-        document.querySelector("#openMusic").style.display = "none";
-        document.querySelector("#closeMusic").style.display = "block";
 
+        document.querySelector("#openMusic").style.display = "block";
+        document.querySelector("#closeMusic").style.display = "none";
         // 手动停止自动导览
         window.player.director.stopTour();
       } else {
         this.musicState = false;
         window.manage.switchBgmState(false);
-        // document.querySelector("#openMusic").style.display = "block";
-        // document.querySelector("#closeMusic").style.display = "none";
+        document.querySelector("#openMusic").style.display = "none";
+        document.querySelector("#closeMusic").style.display = "block";
       }
     },
     // 点击vr
@@ -708,6 +730,9 @@ export default {
     margin-left: @icomarginRight;
     cursor: pointer;
     position: relative;
+    img {
+      display: none;
+    }
     .tip-box {
       display: none;
       position: absolute;