feat: 回滚代码到1.6.9

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

@@ -1,90 +1,86 @@
 <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/FloorSwitch.vue

@@ -1,312 +1,286 @@
 <template>
-  <div
-    class="floor-switch"
-    :class="{ disable: flying }"
-    v-if="floors.length > 1 && mode != 'panorama' && !toursIsplay"
-  >
-    <ul>
-      <li
-        v-if="mode != 'floorplan'"
-        :class="{ active: 'all' == floorId }"
-        @click.stop="onGotoFloor('all')"
-      >
-        <b></b><span>{{ $t("common.all") }}</span>
-      </li>
-      <li
-        v-for="item in floors"
-        :key="item.id"
-        :class="{ active: item.id == floorId }"
-        @click.stop="onGotoFloor(item.id)"
-      >
-        <b></b><span>{{ item.name }}</span>
-      </li>
-    </ul>
-  </div>
+    <div class="floor-switch" :class="{ disable: flying, showTours: showTours }" v-if="floors.length > 1 && mode != 'panorama'">
+        <ul>
+            <li v-if="mode != 'floorplan'" :class="{ active: 'all' == floorId }" @click.stop="onGotoFloor('all')">
+                <b></b><span>{{ $t('common.all') }}</span>
+            </li>
+            <li v-for="item in floors" :key="item.id" :class="{ active: item.id == floorId }" @click.stop="onGotoFloor(item.id)">
+                <b></b><span>{{ item.name }}</span>
+            </li>
+        </ul>
+    </div>
 </template>
 <script setup>
-import { computed, watch, onMounted } from "vue";
-import { useStore } from "vuex";
-import { useApp } from "@/app";
-
-const store = useStore();
-const mode = computed(() => store.getters.mode);
-const flying = computed(() => store.getters["flying"]);
-const floors = computed(() => store.getters["scene/floors"]);
-const floorId = computed(() => store.getters.floorId);
-const showTours = computed(() => store.getters["tour/showTours"]);
-const toursIsplay = computed(() => store.getters["tour/isPlay"]);
-
-const onGotoFloor = (id) => {
-  store.commit("setFloor", id);
-};
-// watch(toursIsplay, (newVal, oldVal) => {
-//   if (oldVal && !newVal) {
-//     // debugger;
-//     store.commit("setMode", 'panorama');
-//   }
-// });
-
-onMounted(() => {
-  useApp().then((sdk) =>
-    sdk.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
-      console.log("mode.beforeChange,", toMode, floorIndex);
-      // store.commit("mode", toMode);wa
-      if (toMode && toMode !== "dollhouse") {
-        store.commit("setFloorId", floorIndex);
-      }
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { useApp } from '@/app'
+const store = useStore()
+const mode = computed(() => store.getters.mode)
+const flying = computed(() => store.getters['flying'])
+const floors = computed(() => store.getters['scene/floors'].reverse())
+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 }) => {
+        store.commit('mode', toMode)
+        if (toMode != 'dollhouse') {
+            store.commit('setFloorId', floorIndex)
+        }
     })
-  );
-});
+)
 </script>
 
 <style lang="scss" scoped>
 .floor-switch {
-  pointer-events: all;
-  position: absolute;
-  bottom: calc(100% + 5px);
-  left: 20px;
-  z-index: 10;
-  transition: bottom 0.1s;
-  ul,
-  li {
-    padding: 0;
-    margin: 0;
-  }
-  ul {
-    position: relative;
-    z-index: 2;
-  }
-  li {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: 50px;
-    &:first-child {
-      b {
-        &::before {
-          display: none;
+    pointer-events: all;
+    position: absolute;
+    bottom: calc(100% + 5px);
+    left: 20px;
+    z-index: 10;
+    transition: bottom 0.1s;
+    ul,
+    li {
+        padding: 0;
+        margin: 0;
+    }
+    ul {
+        position: relative;
+        z-index: 2;
+    }
+    li {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        position: relative;
+        height: 50px;
+        &:first-child {
+            b {
+                &::before {
+                    display: none;
+                }
+            }
+            &.active {
+                b {
+                    &::after {
+                        bottom: -10px;
+                    }
+                }
+            }
+        }
+        &:last-child {
+            b {
+                &::after {
+                    display: none;
+                }
+            }
+            &.active {
+                b {
+                    &::before {
+                        top: -10px;
+                    }
+                }
+            }
         }
-      }
-      &.active {
         b {
-          &::after {
-            bottom: -10px;
-          }
+            position: relative;
+            width: 16px;
+            height: 16px;
+            background-color: #1c1c1c;
+            border-radius: 50%;
+            box-shadow: 0px 0px 2px 1px #404040;
+            cursor: pointer;
+            &::before {
+                content: '';
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                margin-left: -3px;
+                background: #1c1c1c;
+                width: 6px;
+                height: 6px;
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                bottom: -5px;
+                left: 50%;
+                margin-left: -3px;
+                background: #1c1c1c;
+                width: 6px;
+                height: 6px;
+            }
         }
-      }
-    }
-    &:last-child {
-      b {
-        &::after {
-          display: none;
+        span {
+            margin-left: 10px;
+            font-size: 14px;
+            //color: #939393;
+            cursor: pointer;
+            color: #eeeeee;
+            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
         }
-      }
-      &.active {
-        b {
-          &::before {
-            top: -10px;
-          }
+        &.active {
+            b {
+                left: -6px;
+                width: 28px;
+                height: 28px;
+                border: solid 6px #1c1c1c;
+                background-color: #404040;
+                box-shadow: 0px 0px 2px 1px #404040;
+                &::before {
+                    top: -10px;
+                }
+                &::after {
+                    bottom: -10px;
+                }
+            }
+            span {
+                margin-left: 0;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 32px;
+                color: rgba(255, 255, 255, 0.88);
+                border: solid 4px #1c1c1c;
+                background-color: #404040;
+                border-radius: 32px;
+                box-shadow: 0px 0px 2px 1px #404040;
+                padding: 0px 10px;
+                text-shadow: none;
+                &::before {
+                    content: '';
+                    position: absolute;
+                    left: -10px;
+                    background: #1c1c1c;
+                    width: 7px;
+                    height: 4px;
+                    box-shadow: -2px 0px 2px 1px #404040;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    left: -16px;
+                    background: #1c1c1c;
+                    width: 6px;
+                    height: 11px;
+                    border-radius: 50%;
+                }
+            }
         }
-      }
     }
-    b {
-      position: relative;
-      width: 16px;
-      height: 16px;
-      background-color: #1c1c1c;
-      border-radius: 50%;
-      box-shadow: 0px 0px 2px 1px #404040;
-      cursor: pointer;
-      &::before {
-        content: "";
+    &::after {
+        content: '';
         position: absolute;
-        top: -5px;
-        left: 50%;
-        margin-left: -3px;
-        background: #1c1c1c;
+        left: 5px;
+        top: 20px;
+        bottom: 20px;
         width: 6px;
-        height: 6px;
-      }
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: -5px;
-        left: 50%;
-        margin-left: -3px;
         background: #1c1c1c;
-        width: 6px;
-        height: 6px;
-      }
-    }
-    span {
-      margin-left: 10px;
-      font-size: 14px;
-      //color: #939393;
-      cursor: pointer;
-      color: #eeeeee;
-      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
-    }
-    &.active {
-      b {
-        left: -6px;
-        width: 28px;
-        height: 28px;
-        border: solid 6px #1c1c1c;
-        background-color: #404040;
         box-shadow: 0px 0px 2px 1px #404040;
-        &::before {
-          top: -10px;
-        }
-        &::after {
-          bottom: -10px;
-        }
-      }
-      span {
-        margin-left: 0;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 32px;
-        color: rgba(255, 255, 255, 0.88);
-        border: solid 4px #1c1c1c;
-        background-color: #404040;
-        border-radius: 32px;
-        box-shadow: 0px 0px 2px 1px #404040;
-        padding: 0px 10px;
-        text-shadow: none;
-        &::before {
-          content: "";
-          position: absolute;
-          left: -10px;
-          background: #1c1c1c;
-          width: 7px;
-          height: 4px;
-          box-shadow: -2px 0px 2px 1px #404040;
-        }
-        &::after {
-          content: "";
-          position: absolute;
-          left: -16px;
-          background: #1c1c1c;
-          width: 6px;
-          height: 11px;
-          border-radius: 50%;
-        }
-      }
+        z-index: 1;
     }
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    left: 5px;
-    top: 20px;
-    bottom: 20px;
-    width: 6px;
-    background: #1c1c1c;
-    box-shadow: 0px 0px 2px 1px #404040;
-    z-index: 1;
-  }
 }
 [is-mobile] {
-  .floor-switch {
-    bottom: 2.5rem;
-    &.showTours {
-      bottom: 5rem;
-    }
-    li {
-      height: 45px;
-      &:first-child {
-        &.active {
-          b {
-            &::after {
-              bottom: -6px;
-            }
-          }
+    .floor-switch {
+        bottom: 2.5rem;
+        &.showTours {
+            bottom: 5rem;
         }
-      }
-      &:last-child {
-        &.active {
-          b {
-            &::before {
-              top: -6px;
+        li {
+            height: 45px;
+            &:first-child {
+                &.active {
+                    b {
+                        &::after {
+                            bottom: -6px;
+                        }
+                    }
+                }
+            }
+            &:last-child {
+                &.active {
+                    b {
+                        &::before {
+                            top: -6px;
+                        }
+                    }
+                }
+            }
+            b {
+                width: 14px;
+                height: 14px;
+                &::before {
+                    top: -3px;
+                    left: 50%;
+                    margin-left: -2px;
+                    width: 4px;
+                    height: 4px;
+                }
+                &::after {
+                    bottom: -3px;
+                    left: 50%;
+                    margin-left: -2px;
+                    width: 4px;
+                    height: 4px;
+                }
+            }
+            span {
+                font-size: 0.36842rem;
+            }
+            &.active {
+                b {
+                    left: -3px;
+                    width: 20px;
+                    height: 20px;
+                    border: solid 4px #1c1c1c;
+                    &::before {
+                        top: -6px;
+                    }
+                    &::after {
+                        bottom: -6px;
+                    }
+                }
+                span {
+                    height: 30px;
+                    border: solid 3px #1c1c1c;
+                    border-radius: 30px;
+                    padding: 0px 10px;
+                    margin-left: 5px;
+                    &::before {
+                        left: -11px;
+                        width: 10px;
+                        height: 4px;
+                        box-shadow: -2px 0px 1px 1px #404040;
+                    }
+                    &::after {
+                        left: -14px;
+                        width: 3px;
+                        height: 6px;
+                        border-radius: 40%;
+                    }
+                }
             }
-          }
-        }
-      }
-      b {
-        width: 14px;
-        height: 14px;
-        &::before {
-          top: -3px;
-          left: 50%;
-          margin-left: -2px;
-          width: 4px;
-          height: 4px;
         }
         &::after {
-          bottom: -3px;
-          left: 50%;
-          margin-left: -2px;
-          width: 4px;
-          height: 4px;
+            left: 5px;
+            top: 20px;
+            bottom: 20px;
+            width: 4px;
         }
-      }
-      span {
-        font-size: 0.36842rem;
-      }
-      &.active {
-        b {
-          left: -3px;
-          width: 20px;
-          height: 20px;
-          border: solid 4px #1c1c1c;
-          &::before {
-            top: -6px;
-          }
-          &::after {
-            bottom: -6px;
-          }
-        }
-        span {
-          height: 30px;
-          border: solid 3px #1c1c1c;
-          border-radius: 30px;
-          padding: 0px 10px;
-          margin-left: 5px;
-          &::before {
-            left: -11px;
-            width: 10px;
-            height: 4px;
-            box-shadow: -2px 0px 1px 1px #404040;
-          }
-          &::after {
-            left: -14px;
-            width: 3px;
-            height: 6px;
-            border-radius: 40%;
-          }
-        }
-      }
-    }
-    &::after {
-      left: 5px;
-      top: 20px;
-      bottom: 20px;
-      width: 4px;
     }
-  }
 
-  @media (orientation: landscape) {
-    .floor-switch {
-      bottom: 1rem;
-      li {
-        span {
-          font-size: 0.25rem;
+    @media (orientation: landscape) {
+        .floor-switch {
+            bottom: 1rem;
+            li {
+                span {
+                    font-size: 0.25rem;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>

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

@@ -129,7 +129,7 @@ const onModeChange = name => {
 const playTour = async () => {
     let player = await getApp().TourManager.player
     if (isPlay.value) {
-        store.commit('tour/setData', { isPlay: false })
+        store.commit('tour/setData', { isPlay: true })
         player.pause()
     } else {
         store.commit('tour/setData', { isPlay: true })

packages/qjkankan-kankan-view/src/components/Controls/tours.mobile.vue

@@ -124,24 +124,16 @@ const isPlay = computed(() => {
   return status;
 });
 const isInit = ref(false);
-const tours = computed(() => store.getters["tour/tours"]);
-
-watch(
-  [tours, tourScroll],
-  (val) => {
-    if (val[0].length > 0 && val[1]) {
-      if (!isInit.value) {
-        isInit.value = true;
-        new Scrollbar(tourScroll.value, { onlyHorizontal: true });
-        console.log("init-Scrollbar");
-      }
+const tours = computed(() => {
+  let tours = store.getters["tour/tours"];
+  if (tours.length > 0) {
+    if (tourScroll.value && !isInit.value) {
+      isInit.value = true;
+      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
     }
-  },
-  {
-    immediate: true,
-    deep: true,
   }
-);
+  return tours;
+});
 const onModeChange = (name) => {
   store.commit("setMode", name);
 };
@@ -149,7 +141,7 @@ const onModeChange = (name) => {
 const playTour = async () => {
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit("tour/setData", { isPlay: false });
+    store.commit("tour/setData", { isPlay: true });
     player.pause();
   } else {
     store.commit("tour/setData", { isPlay: true });
@@ -347,7 +339,7 @@ watch(isOpenTours, () => {
   openTours();
 });
 
-watch(isPlay, (nv, ov) => {
+watch(isPlay, () => {
   window.parent.postMessage(
     {
       source: "qjkankan",
@@ -358,11 +350,6 @@ watch(isPlay, (nv, ov) => {
     },
     "*"
   );
-  if (ov && !nv) {
-    console.log("tour-kk-isPlay", isPlay.value);
-    store.commit("setMode", "panorama");
-    store.commit("setFlying", false);
-  }
 });
 
 onMounted(() => {

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

@@ -82,7 +82,6 @@ import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import common from "@/utils/common";
 import { useMusicPlayer } from "@/utils/sound";
-import { watchEffect } from "vue";
 const musicPlayer = useMusicPlayer();
 
 const spanlength = ref(5);
@@ -126,24 +125,16 @@ const isPlay = computed(() => {
   return status;
 });
 const isInit = ref(false);
-const tours = computed(() => store.getters["tour/tours"]);
-
-watch(
-  [tours, tourScroll],
-  (val) => {
-    if (val[0].length > 0 && val[1]) {
-      if (!isInit.value) {
-        isInit.value = true;
-        new Scrollbar(tourScroll.value, { onlyHorizontal: true });
-        console.log("init-Scrollbar");
-      }
+const tours = computed(() => {
+  let tours = store.getters["tour/tours"];
+  if (tours.length > 0) {
+    if (tourScroll.value && !isInit.value) {
+      isInit.value = true;
+      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
     }
-  },
-  {
-    immediate: true,
-    deep: true,
   }
-);
+  return tours;
+});
 const onModeChange = (name) => {
   store.commit("setMode", name);
 };
@@ -151,7 +142,7 @@ const onModeChange = (name) => {
 const playTour = async () => {
   let player = await getApp().TourManager.player;
   if (isPlay.value) {
-    store.commit("tour/setData", { isPlay: false });
+    store.commit("tour/setData", { isPlay: true });
     player.pause();
   } else {
     store.commit("tour/setData", { isPlay: true });
@@ -345,7 +336,7 @@ watch(isOpenTours, () => {
   openTours();
 });
 
-watch(isPlay, (nv, ov) => {
+watch(isPlay, () => {
   window.parent.postMessage(
     {
       source: "qjkankan",
@@ -356,11 +347,6 @@ watch(isPlay, (nv, ov) => {
     },
     "*"
   );
-  if (ov && !nv) {
-    console.log("tour-kk-isPlay", isPlay.value);
-    store.commit("setMode", "panorama");
-    store.commit("setFlying", false);
-  }
 });
 
 onMounted(() => {

packages/qjkankan-kankan-view/src/components/Information/View.Pc.vue

@@ -43,7 +43,6 @@ const onShowDescription = () => {
   height: 100%;
   cursor: pointer;
   transition: all 0.1s;
-
   background: linear-gradient(
     90deg,
     rgba(0, 0, 0, 0) 0%,
@@ -89,7 +88,7 @@ const onShowDescription = () => {
     }
   }
   .text {
-    // max-width: 540px;
+    // width: 190px;
     text-align: center;
     min-width: 240px;
     transition: width 0.3s;

packages/qjkankan-kankan-view/src/pages/SPG.vue

@@ -8,12 +8,10 @@
       <UiTags />
       <Information />
       <BottomControl />
-      <Camera />
     </div>
     <!-- </template> -->
   </div>
   <DesignOption />
-
 </template>
 
 <script setup>
@@ -24,9 +22,6 @@ import Information from "@/components/Information";
 import BottomControl from "@/components/Controls/BottomControl";
 import Password from "@/components/shared/Password.vue";
 import LoadingLogo from "@/components/shared/Loading.vue";
-
-import Camera from "@/components/Camera/index.vue";
-
 import { createApp } from "@/app";
 import { listenMessage } from "@/utils/messageHandler";
 import { Dialog } from "@/global_components";
@@ -39,8 +34,11 @@ const { t } = useI18n({ useScope: "global" });
 
 onMounted(async () => {
   if (browser.isMobile()) {
-    window.location.href = window.location.href.replace("spg.html", "smg.html");
-    console.warn("重跳后：：", window.location.href);
+    window.location.href = window.location.href.replace(
+      "spg.html",
+      "smg.html"
+    );
+    console.warn('重跳后：：',window.location.href);
     return;
   }
 });
@@ -263,10 +261,6 @@ onMounted(() => {
   app.store.on("flooruser", (floor) =>
     store.commit("scene/loadFloorData", floor)
   ); //4.7以后新楼层方式
-
-  app.Camera.on("SecurityCamera.watch", (data) => {
-    console.error("SecurityCamera.watch", data);
-  });
   app.render();
 });
 </script>

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

@@ -58,9 +58,6 @@ 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,59 +1,64 @@
-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;
-        console.warn("收到切换openTours", params.showTours);
+        isOpenTours.value = params.showTours
       }
 
-      //相机模式改变
+       //相机模式改变
       if (event == "setMode") {
-        console.warn("收到切换Mode", params.name);
-        store.commit("setMode", 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)
+  })
+
+
+}
+