feat: test

packages/qjkankan-kankan-view/src/components/Controls/BottomControl.vue

@@ -1,86 +1,90 @@
 <template>
-    <div class="bottom-controls" :class="{ hidden: isHidden }" :style="{ bottom }" v-show="show">
-        <!-- <FloorSwitch /> -->
-        <tours />
-    </div>
+  <div
+    class="bottom-controls"
+    :class="{ hidden: isHidden }"
+    :style="{ bottom }"
+    v-show="show"
+  >
+    <FloorSwitch />
+    <tours />
+  </div>
 </template>
 <script setup>
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { ref } from 'vue'
-import { useApp, getApp } from '@/app'
-import FloorSwitch from './FloorSwitch'
-import tours from './tours'
+import { computed } from "vue";
+import { useStore } from "vuex";
+import { ref } from "vue";
+import { useApp, getApp } from "@/app";
+import FloorSwitch from "./FloorSwitch";
+import tours from "./tours";
 
-const store = useStore()
-const show = ref(false)
-const isHidden = ref(false)
+const store = useStore();
+const show = ref(false);
+const isHidden = ref(false);
 const bottom = computed(() => {
-    return store.getters.controlsBottom
-})
-useApp().then(app => {
-    app.Scene.on('loaded', () => (show.value = true))
-})
-
+  return store.getters.controlsBottom;
+});
+useApp().then((app) => {
+  app.Scene.on("loaded", () => (show.value = true));
+});
 </script>
 
 <style lang="scss" scoped>
 .bottom-controls {
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: var(--editor-toolbox-width);
-    bottom: 20px;
-    height: 34px;
-    display: flex;
-    justify-content: space-between;
-    transition: bottom 0.3s ease;
-    z-index: 100;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  right: var(--editor-toolbox-width);
+  bottom: 20px;
+  height: 34px;
+  display: flex;
+  justify-content: space-between;
+  transition: bottom 0.3s ease;
+  z-index: 100;
 }
 
 :deep(.buttons) {
-    pointer-events: all;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    height: 34px;
-    border-radius: 17px;
-    background-color: rgba(0, 0, 0, 0.3);
-    > div {
-        position: relative;
-        margin-left: 20px;
-        margin-right: 20px;
-        cursor: pointer;
-        &.active {
-            color: var(--editor-main-color);
-        }
-        > i {
-            font-size: 18px;
-        }
-        span {
-            cursor: pointer;
-            display: none;
-            position: absolute;
-            top: -20px;
-            right: -15px;
-            width: 24px;
-            height: 24px;
-            background-color: rgba(0, 0, 0, 0.5);
-            border-radius: 50%;
-            align-items: center;
-            justify-content: center;
-            color: var(--editor-main-color);
-            transition: all 0.1s;
+  pointer-events: all;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 34px;
+  border-radius: 17px;
+  background-color: rgba(0, 0, 0, 0.3);
+  > div {
+    position: relative;
+    margin-left: 20px;
+    margin-right: 20px;
+    cursor: pointer;
+    &.active {
+      color: var(--editor-main-color);
+    }
+    > i {
+      font-size: 18px;
+    }
+    span {
+      cursor: pointer;
+      display: none;
+      position: absolute;
+      top: -20px;
+      right: -15px;
+      width: 24px;
+      height: 24px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+      color: var(--editor-main-color);
+      transition: all 0.1s;
 
-            &:hover {
-                transform: scale(1.2);
-            }
-            &.disable {
-                i {
-                    opacity: 0.5;
-                }
-            }
+      &:hover {
+        transform: scale(1.2);
+      }
+      &.disable {
+        i {
+          opacity: 0.5;
         }
+      }
     }
+  }
 }
 </style>

packages/qjkankan-kankan-view/src/components/Controls/Control.Mobile.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <FloorSwitch /> -->
+    <FloorSwitch />
     <tours />
   </div>
 </template>

packages/qjkankan-kankan-view/src/components/Controls/FloorSwitch.vue

@@ -5,6 +5,9 @@
     v-if="floors.length > 1 && mode != 'panorama'"
   >
     <ul>
+      {{
+        floors
+      }}
       <li
         v-if="mode != 'floorplan'"
         :class="{ active: 'all' == floorId }"
@@ -27,24 +30,27 @@
 import { computed } from "vue";
 import { useStore } from "vuex";
 import { useApp } from "@/app";
+import { onMounted } from "vue";
 const store = useStore();
 const mode = computed(() => store.getters.mode);
 const flying = computed(() => store.getters["flying"]);
-const floors = computed(() => store.getters["scene/floors"].reverse());
+const floors = computed(() => store.getters["scene/floors"]);
 const floorId = computed(() => store.getters.floorId);
 const showTours = computed(() => store.getters["tour/showTours"]);
 const onGotoFloor = (id) => {
   store.commit("setFloor", id);
 };
-useApp().then((sdk) =>
-  sdk.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
-    console.log("mode.beforeChange,", toMode, floorIndex);
-    // store.commit("mode", toMode);
-    if (toMode && toMode !== "dollhouse") {
-      store.commit("setFloorId", floorIndex);
-    }
-  })
-);
+onMounted(() => {
+  useApp().then((sdk) =>
+    sdk.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
+      console.log("mode.beforeChange,", toMode, floorIndex);
+      // store.commit("mode", toMode);
+      if (toMode && toMode !== "dollhouse") {
+        store.commit("setFloorId", floorIndex);
+      }
+    })
+  );
+});
 </script>
 
 <style lang="scss" scoped>

packages/qjkankan-kankan-view/src/store/index.js

@@ -58,6 +58,9 @@ const store = createStore({
          */
         setMode(state, payload) {
             if (payload == state.mode || !payload) {
+                // debugger
+                store.commit('setFlying', false)
+                console.log('设置相机模式相同')
                 return
             }
             store.commit('setFlying', true)

packages/qjkankan-kankan-view/src/utils/messageHandler.js

@@ -1,64 +1,58 @@
-import { computed,provide, onMounted, onUnmounted, ref, nextTick } from 'vue'
-import { useStore } from 'vuex'
-import { useMusicPlayer } from '@/utils/sound'
-const musicPlayer = useMusicPlayer()
+import { computed, provide, onMounted, onUnmounted, ref, nextTick } from "vue";
+import { useStore } from "vuex";
+import { useMusicPlayer } from "@/utils/sound";
+const musicPlayer = useMusicPlayer();
 
 export const listenMessage = () => {
-  const store = useStore()
-  const triggerTour = ref(0)
-  const isOpenTours = ref(false)
+  const store = useStore();
+  const triggerTour = ref(0);
+  const isOpenTours = ref(false);
 
   provide("triggerTour", triggerTour);
   provide("isOpenTours", isOpenTours);
 
   const handleMessage = (res) => {
-    if (Object.prototype.toString.call(res.data) == '[object Object]') {
-      if (res.data.source !== 'qjkankan') {
-        return
+    if (Object.prototype.toString.call(res.data) == "[object Object]") {
+      if (res.data.source !== "qjkankan") {
+        return;
       }
 
-      let { event, params } = res.data
+      let { event, params } = res.data;
 
       //触发自动导览
       if (event == "playTour") {
-        triggerTour.value += 1
+        triggerTour.value += 1;
       }
 
       //导览列表开关
       if (event == "openTours") {
-        isOpenTours.value = params.showTours
+        isOpenTours.value = params.showTours;
       }
 
-       //相机模式改变
+      //相机模式改变
       if (event == "setMode") {
-        store.commit('setMode', params.name)
+        console.warn("收到切换Mode", params.name);
+        store.commit("setMode", params.name);
       }
 
       if (event == "enterVr") {
         store.commit("showVR");
       }
-      
 
-        //相机模式改变
+      //相机模式改变
       if (event == "toggleBGM") {
-        
       }
-  
     }
-  }
+  };
 
   onMounted(() => {
     nextTick(() => {
-      window.removeEventListener('message', handleMessage)
-      window.addEventListener('message', handleMessage)
-    })
-
-  })
+      window.removeEventListener("message", handleMessage);
+      window.addEventListener("message", handleMessage);
+    });
+  });
 
   onUnmounted(() => {
-    window.removeEventListener('message', handleMessage)
-  })
-
-
-}
-
+    window.removeEventListener("message", handleMessage);
+  });
+};