feat: --

scene/package.json

@@ -19,6 +19,7 @@
     "npm": "^8.10.0",
     "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",
+    "viewerjs": "^1.11.7",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-click-outside": "^1.1.0",

scene/src/views/gui/menu.vue

@@ -168,17 +168,18 @@
     <template v-if="!isMobile">
       <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' && !showGuide && !guideIsPlay" class="left-btn">
-          <div class="button-item" :class="getActive(i.type)" v-show="i.type == 'model' || mode == 'panorama'" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
+          <div class="button-item" :class="getActive(i.type)" v-show="mode == 'dollhouse' ? ['model', 'realMap'].includes(i.type) : !['model', 'realMap'].includes(i.type)" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
             <img class="normal" :src="i.normalIcon" alt="" />
             <img class="active" :src="i.activeIcon" alt="" />
-            <div class="tip-box">{{ i.name }}</div>
+            <div class="tip-box">{{ getActive(i.type) === 'active' ? (i.activeName || i.name) : i.name }}</div>
           </div>
-          <div
-            class="button-item"
-            v-if="(i.action == 'play' && !guideIsPlay && mode == 'panorama') || (i.action == 'pause' && guideIsPlay && mode == 'panorama')"
-            v-for="(i, index) in playButtons"
-            @click.stop="hanlderButtons(i, i.type)"
-          >
+        </div>
+      </transition>
+
+      <!-- 沉浸模式-工具栏 -->
+      <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="left-btn">
+          <div class="button-item" :class="getActive(i.type)" v-for="(i, index) in immersiveButtons" @click.stop="hanlderButtons(i, i.type)">
             <img class="normal" :src="i.normalIcon" alt="" />
             <img class="active" :src="i.activeIcon" alt="" />
             <div class="tip-box">{{ i.name }}</div>
@@ -194,8 +195,18 @@
           </div>
         </transition>
         <transition name="activeScene">
-          <div v-show="openType == 'immersive'" class="button-item" @click="openType = null">
-            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_mod_active.svg')" alt="" />
+          <div v-if="openType == 'immersive'" class="">
+            <div
+              v-for="(i, index) in playButtons"
+              :key="index"
+              v-show="(i.action == 'play' && !guideIsPlay && mode == 'panorama') || (i.action == 'pause' && guideIsPlay && mode == 'panorama')"
+              class="button-item2 button-item"
+              @click.stop="hanlderButtons(i, i.type)"
+            >
+              <img class="normal" :src="i.normalIcon" alt="" />
+              <img class="active" :src="i.activeIcon" alt="" />
+              <div class="tip-box">{{ i.name }}</div>
+            </div>
           </div>
         </transition>
         <transition name="nextScene">
@@ -213,17 +224,7 @@
           :class="getActive(i.type)"
           @click.stop="hanlderButtons(i, i.type)"
           v-for="(i, index) in mobileTopBtns"
-          v-show="i.type == 'model' || i.type == 'music' || mode == 'panorama'"
-        >
-          <img class="normal" :src="i.normalIcon" alt="" />
-          <img class="active" :src="i.activeIcon" alt="" />
-        </div>
-
-        <div
-          class="button-item"
-          v-if="(i.action == 'play' && !guideIsPlay && mode == 'panorama') || (i.action == 'pause' && guideIsPlay && mode == 'panorama')"
-          v-for="(i, index) in playButtons"
-          @click.stop="hanlderButtons(i, i.type)"
+          v-show="mode == 'dollhouse' ? ['model', 'realMap'].includes(i.type) : !['model', 'realMap'].includes(i.type)"
         >
           <img class="normal" :src="i.normalIcon" alt="" />
           <img class="active" :src="i.activeIcon" alt="" />
@@ -258,7 +259,10 @@
       <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="mapVisible" @close="() => {
+        openType = null
+        mapVisible = false
+      }"> </LayerMap>
     </transition>
   </div>
 </template>
@@ -310,25 +314,42 @@ export default {
         },
       ],
 
+      immersiveButtons: [
+        {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_mod.svg"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_mod_active.svg"),
+          name: "退出",
+          type: "immersive",
+        },
+      ],
+
       leftButtons: [
+        // 3d模型迁移至导航地图，原图标改为退出按钮
         {
           normalIcon: require("@/assets/image/icon/new-icon/icon_dollhouse.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_dollhouse_active.svg"),
-          name: "3d模型",
+          name: "退出",
           type: "model",
         },
         {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_floor_normal.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_floor_active.png"),
+          name: "平面地图",
+          type: "realMap",
+        },
+
+        {
           normalIcon: require("@/assets/image/icon/new-icon/icon_map.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_map_active.svg"),
           name: "导航地图",
           type: "map",
         },
-        {
-          normalIcon: require("@/assets/image/icon/new-icon/icon_point.svg"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.svg"),
-          name: "重点展位",
-          type: "tour",
-        },
+        // {
+        //   normalIcon: require("@/assets/image/icon/new-icon/icon_point.svg"),
+        //   activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.svg"),
+        //   name: "重点展位",
+        //   type: "tour",
+        // },
         {
           normalIcon: require("@/assets/image/icon/new-icon/icon_detail.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_detail_active.svg"),
@@ -339,6 +360,7 @@ export default {
           normalIcon: require("@/assets/image/icon/new-icon/icon_line.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.svg"),
           name: "展览路线",
+          activeName: "关闭展览路线",
           type: "route",
         },
         {
@@ -366,10 +388,17 @@ export default {
         {
           normalIcon: require("@/assets/image/icon/new-icon/icon_dollhouse.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_dollhouse_active.svg"),
-          name: "3d模型",
+          name: "退出",
           type: "model",
         },
         {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_floor_normal.png"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_floor_active.png"),
+          name: "平面地图",
+          type: "realMap",
+        },
+
+        {
           normalIcon: require("@/assets/image/icon/new-icon/icon_map.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_map_active.svg"),
           name: "导航地图",
@@ -389,12 +418,12 @@ export default {
           name: "热点列表",
           type: "hots",
         },
-        {
-          normalIcon: require("@/assets/image/icon/new-icon/icon_point.svg"),
-          activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.svg"),
-          name: "重点展位",
-          type: "tour",
-        },
+        // {
+        //   normalIcon: require("@/assets/image/icon/new-icon/icon_point.svg"),
+        //   activeIcon: require("@/assets/image/icon/new-icon/icon_point_active.svg"),
+        //   name: "重点展位",
+        //   type: "tour",
+        // },
         {
           normalIcon: require("@/assets/image/icon/new-icon/icon_line.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.svg"),
@@ -408,12 +437,20 @@ export default {
           type: "controls",
         },
         {
+          normalIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
+          activeIcon: require("@/assets/image/icon/new-icon/icon_play.svg"),
+          name: "自动导览",
+          action: "play",
+          type: "controls",
+        },
+        {
           normalIcon: require("@/assets/image/icon/new-icon/icon_next.svg"),
           activeIcon: require("@/assets/image/icon/new-icon/icon_line_active.svg"),
           name: "前进",
           type: "controls",
         },
       ],
+      mapVisible: false
     };
   },
   watch: {
@@ -559,6 +596,14 @@ export default {
           }
           break;
         case "model":
+          player.FlyToMode("panorama");
+          this.mode = "panorama";
+          break;
+        case "realMap":
+          this.openType = 'realMap';
+          this.mapVisible = true;
+          break;
+        case "map":
           if (player.mode == "dollhouse") {
             player.FlyToMode("panorama");
             this.mode = "panorama";
@@ -566,9 +611,6 @@ export default {
             player.FlyToMode("dollhouse");
             this.mode = "dollhouse";
           }
-
-          break;
-        case "map":
           break;
         case "tour":
           if (!this.tourList.length) {
@@ -583,10 +625,12 @@ export default {
           this.onFullScreen();
           break;
         case "controls":
-          if (item.name == "前进") {
-            this.goScene("next");
+          if (item.name == '自动导览') {
+            this.hanlderButtons(this.playButtons[0], this.playButtons[0].type);
+          } else if (item.name == "前进") {
+            window.tourPlayCtl.go(1);
           } else {
-            this.goScene("prev");
+            window.tourPlayCtl.go(-1);
           }
           break;
       }
@@ -599,8 +643,8 @@ export default {
           }
           break;
 
-        case "map":
-          if (this.openType == "map") {
+        case "realMap":
+          if (this.openType == "realMap") {
             return "active";
           }
           break;
@@ -995,24 +1039,16 @@ export default {
   }
 }
 .mobile-bottom-button {
-  width: @mobileIconSize;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   bottom: 20px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   flex-direction: row;
-  width: 200px;
+  gap: 0.6667rem;
   &.center {
     justify-content: center;
-    .button-item {
-      margin-right: 0.5333rem;
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
   }
   .button-item {
     width: @mobileIconSize;
@@ -1189,8 +1225,9 @@ export default {
   align-items: center;
   justify-content: flex-start;
   position: absolute;
-  left: 450px;
+  left: 50%;
   bottom: 40px;
+  transform: translateX(-50%);
   .button-item {
     width: @iconW;
     height: @iconW;
@@ -1200,6 +1237,53 @@ export default {
     margin-right: 25px;
     cursor: pointer;
     position: relative;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+  .button-item2 {
+    .tip-box {
+      display: none;
+      position: absolute;
+      top: -38px;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      height: 29px;
+      color: #fff;
+      text-align: center;
+      line-height: 29px;
+      background: rgba(55, 54, 53, 0.6);
+      border: 1px solid #fff;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      padding: 0 8px;
+    }
+    .active {
+      display: none;
+    }
+    &:hover {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+      .tip-box {
+        display: block;
+      }
+    }
+    &.active {
+      .normal {
+        display: none;
+      }
+      .active {
+        display: block;
+      }
+    }
   }
 }