feat: .

scene/src/View.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="view-body" :class="{ isMobile }">
+    <div class="switch-btn" v-if="mode == 'dollhouse'">
+      <div
+        class="btn-item"
+        :class="{ active: sceneNum === scene.num }"
+        v-for="scene in sceneList"
+        :key="scene.num"
+        @click="changeScene(scene.num)"
+      >
+        {{ scene.name }}
+      </div>
+    </div>
+    <iframe
+      v-if="show"
+      :src="sceneUrl"
+      allowfullscreen
+      frameborder="0"
+      id="myIframe"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { getExhibitionInfoAPI } from "@/utils/api";
+import browser from "@/utils/browser";
+export default {
+  data() {
+    return {
+      show: true,
+      // sceneNum: "KJ-t-tHpdpKvb0ew",
+      sceneNum: "",
+      mode: "",
+      sceneList: [],
+    };
+  },
+
+  computed: {
+    ...mapGetters({
+      points: "points",
+      flyInModel: "flyInModel",
+    }),
+    sceneUrl() {
+      return `/index.html?m=${this.sceneNum}#/`;
+    },
+  },
+  methods: {
+    ...mapMutations(["setData"]),
+
+    changeScene(num) {
+      // let myIframe = document.getElementById("myIframe");
+
+      // myIframe.contentWindow.player.FlyToMode("dollhouse");
+      // console.error(myIframe.contentWindow.player);
+
+      this.sceneNum = num;
+      localStorage.setItem("flyInModel", true);
+      this.show = false;
+
+      setTimeout(() => {
+        this.show = true;
+        // let myIframe = document.getElementById("myIframe");
+        // myIframe.addEventListener("load", function () {
+        //   setTimeout(() => {
+        //     console.error(myIframe.contentWindow.player.mode);
+        //   }, 1000);
+        // });
+      }, 0);
+    },
+  },
+  mounted() {
+    getExhibitionInfoAPI().then((res) => {
+      let id = browser.getURLParam("projectId");
+      let index = res.findIndex((item) => item.id == id);
+      if (index != -1) {
+        this.sceneList = res[0].sceneList;
+        this.sceneNum = res[0].sceneList[0].num;
+      } else {
+        alert("未找到对应的展览项目，请检查链接是否正确！");
+      }
+    });
+    window.setMode = (mode) => {
+      this.mode = mode;
+    };
+    window.setUrl = (num) => {
+      this.changeScene(num);
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.view-body {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+  .switch-btn {
+    // position: absolute;
+    // top: 50%;
+    // transform: translateY(-50%);
+    // left: 20px;
+    // background: rgba(0, 0, 0, 0.5);
+    // border-radius: 8px;
+    // padding: 10px;
+    position: fixed;
+    bottom: 200px;
+    left: 20px;
+    // display: none;
+    flex-direction: column;
+    gap: 15px;
+    display: flex;
+    z-index: 1000;
+    user-select: none;
+    .btn-item {
+      // width: auto;
+      // height: 40px;
+      // display: flex;
+      // align-items: center;
+      // justify-content: center;
+      // color: #ff7900;
+      // cursor: pointer;
+
+      padding: 12px 24px;
+      background-color: rgba(55, 54, 53, 0.5);
+      color: #a88959;
+      border: 1px solid rgba(113, 88, 49, 0.8);
+      border-radius: 23px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      padding: 0 20px;
+      height: 47px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 700;
+      text-align: center;
+      &.active {
+        background-color: rgba(71, 71, 71, 0.8);
+      }
+    }
+  }
+  &.isMobile {
+    .switch-btn {
+      position: fixed;
+      bottom: 2.6667rem;
+      left: 10px;
+      // display: none;
+      flex-direction: column;
+      gap: 0.4rem;
+      display: flex;
+      z-index: 1000;
+      user-select: none;
+      .btn-item {
+        padding: 0 0.2667rem;
+        height: 1.0667rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.48rem;
+      }
+    }
+  }
+}
+</style>

scene/src/assets/image/icon/new-icon/test.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 664.4 968.5" style="enable-background:new 0 0 664.4 968.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.4;fill-rule:evenodd;clip-rule:evenodd;fill:#865C5C;enable-background:new    ;}
+</style>
+<path class="st0" d="M334.4,0v653.4L229,654.2v119.6H0V505.7h255.7l1.1-295.7H1.1L0,0H334.4z"/>
+<path class="st0" d="M334.4,0v653.5l110.6,0.9v119.5h219.4V505.7L411.3,506l1.1-295l253.1-0.3L664.4,0H334.4z"/>
+</svg>

scene/src/pages/View.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="view-body">
-    <div class="switch-btn">
-      <div
-        class="btn-item"
-        v-for="scene in sceneList"
-        :key="scene.num"
-        @click="changeScene(scene.num)"
-      >
-        {{ scene.name }}
-      </div>
-    </div>
-    <iframe
-      v-if="show"
-      :src="sceneUrl"
-      allowfullscreen
-      frameborder="0"
-      id="myIframe"
-    ></iframe>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "View",
-  components: {},
-
-  data() {
-    return {
-      show: true,
-      sceneNum: "KJ-t-tHpdpKvb0ew",
-
-      sceneList: [
-        { name: "场景1", num: "KJ-t-tHpdpKvb0ew" },
-        { name: "场景2", num: "KJ-t-tHpdpKvb0ew" },
-      ],
-    };
-  },
-  computed: {
-    sceneUrl() {
-      return `/index.html#/?m=${this.sceneNum}`;
-    },
-  },
-  methods: {
-    changeScene(num) {
-      this.sceneNum = num;
-
-      this.show = false;
-      setTimeout(() => {
-        this.show = true;
-      }, 0);
-    },
-  },
-  mounted() {},
-};
-</script>
-
-<style lang="less" scoped>
-.view-body {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  iframe {
-    width: 100%;
-    height: 100%;
-  }
-  .switch-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 20px;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 8px;
-    padding: 10px;
-    .btn-item {
-      width: auto;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #ff7900;
-      cursor: pointer;
-    }
-  }
-}
-</style>

scene/src/store/index.js

@@ -12,8 +12,12 @@ const store = new Vuex.Store({
     guideIsPlay: false,
     isCollapse: false,
     guidePlayIndex: 0,
+    flyInModel: false,
   },
   getters: {
+    flyInModel(state) {
+      return state.flyInModel;
+    },
     points(state) {
       return state.points;
     },

scene/src/utils/api.js

@@ -1,16 +1,23 @@
-import axios from './request'
+import axios from "./request";
 // 访问量+1
 export const addVisitAPI = () => {
   return axios({
-    method: 'get',
+    method: "get",
     url: `show/addVisit/${1}`,
-  })
-}
+  });
+};
 
 // 获取访问量
 export const getVisitAPI = () => {
   return axios({
-    method: 'get',
-    url: 'show/share/detail',
-  })
-}
+    method: "get",
+    url: "show/share/detail",
+  });
+};
+//获取展览信息
+export const getExhibitionInfoAPI = () => {
+  return axios({
+    method: "get",
+    url: "/static/data/data.json",
+  });
+};

scene/src/utils/browser.js

@@ -1,35 +1,160 @@
-function versions () {
-  var u = window.navigator.userAgent
-  return {
-    // IE内核
-    trident: u.indexOf('Trident') > -1,
-    // Firefox
-    firefox: u.indexOf('Firefox') > -1,
-    // edge
-    edge: u.indexOf('Edge') > -1,
-    // opera内核
-    presto: u.indexOf('Presto') > -1,
-    // 苹果、谷歌内核
-    webKit: u.indexOf('AppleWebKit') > -1,
-    // 火狐内核
-    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
-    // 是否为移动终端
-    mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
-    // ios终端
-    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
-    // android终端或者uc浏览器
-    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
-    // 是否为iPhone或者安卓QQ浏览器
-    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
-    // 是否为iPad
-    iPad: u.indexOf('iPad') > -1,
-    // 是否为web应用程序，没有头部与底部
-    webApp: u.indexOf('Safari') === -1,
-    // 是否为微信浏览器
-    weixin: ~u.indexOf('MicroMessenger'),
-    // 获取浏览器语言
-    language: (navigator.browserLanguage || navigator.language).toLowerCase()
-  }
-}
+// function versions() {
+//   var u = window.navigator.userAgent;
+//   return {
+//     // IE内核
+//     trident: u.indexOf("Trident") > -1,
+//     // Firefox
+//     firefox: u.indexOf("Firefox") > -1,
+//     // edge
+//     edge: u.indexOf("Edge") > -1,
+//     // opera内核
+//     presto: u.indexOf("Presto") > -1,
+//     // 苹果、谷歌内核
+//     webKit: u.indexOf("AppleWebKit") > -1,
+//     // 火狐内核
+//     gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") === -1,
+//     // 是否为移动终端
+//     mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
+//     // ios终端
+//     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+//     // android终端或者uc浏览器
+//     android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1,
+//     // 是否为iPhone或者安卓QQ浏览器
+//     iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1,
+//     // 是否为iPad
+//     iPad: u.indexOf("iPad") > -1,
+//     // 是否为web应用程序，没有头部与底部
+//     webApp: u.indexOf("Safari") === -1,
+//     // 是否为微信浏览器
+//     weixin: ~u.indexOf("MicroMessenger"),
+//     // 获取浏览器语言
+//     language: (navigator.browserLanguage || navigator.language).toLowerCase(),
+//   };
+// }
 
-export default versions()
+// export default versions();
+export default {
+  hasURLParam: function (key) {
+    let querys = window.location.search.substring(1).split("&");
+    for (let i = 0; i < querys.length; i++) {
+      let keypair = querys[i].split("=");
+      if (keypair[0] == key) {
+        return true;
+      }
+    }
+    return false;
+  },
+  getLang() {
+    return this.getURLParam("lang") || "zh";
+  },
+  getURLParam: function (key) {
+    let querys = window.location.search.substring(1).split("&");
+    for (let i = 0; i < querys.length; i++) {
+      let keypair = querys[i].split("=");
+      if (keypair.length === 2 && keypair[0] === key) {
+        try {
+          return decodeURIComponent(keypair[1]);
+        } catch (error) {
+          return keypair[1];
+        }
+      }
+    }
+    return "";
+  },
+  valueFromUrl(key) {
+    return this.urlHasValue(key, true);
+  },
+  urlHasValue: function (key, isGetValue) {
+    if (
+      key === "m" &&
+      window.__ProjectNum &&
+      window.__ProjectNum != "__ProjectNum__"
+    ) {
+      return window.__ProjectNum;
+    }
+
+    let querys = window.location.search.substr(1).split("&");
+    if (isGetValue) {
+      for (let i = 0; i < querys.length; i++) {
+        let keypair = querys[i].split("=");
+        if (keypair.length === 2 && keypair[0] === key) {
+          return keypair[1];
+        }
+      }
+      return "";
+    } else {
+      //return window.location.search.match("&" + key + "|\\?" + key) != null  有bug
+      for (let i = 0; i < querys.length; i++) {
+        let keypair = querys[i].split("=");
+        if (keypair[0] == key) {
+          return true;
+        }
+      }
+      return false;
+    }
+  },
+  detectWeixin: function () {
+    //微信 包括PC的微信
+    return (
+      window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) ==
+      "micromessenger"
+    );
+  },
+  detectWeixinMiniProgram: function () {
+    return window.navigator.userAgent.match("miniProgram");
+  },
+  detectIOS: function () {
+    return this.detectIPhone() || this.detectIPad() || this.detectIPod();
+  },
+  detectIPhone: function () {
+    var e = window.navigator.userAgent,
+      t = /iPhone/;
+    return t.test(e);
+  },
+  detectIPad: function () {
+    if (
+      window.navigator.platform === "MacIntel" &&
+      window.navigator.maxTouchPoints > 1
+    ) {
+      return true;
+    }
+    var e = window.navigator.userAgent,
+      t = /iPad/;
+    return t.test(e);
+  },
+  detectIPod: function () {
+    var e = window.navigator.userAgent,
+      t = /iPod/;
+    return t.test(e);
+  },
+  detectAndroid: function () {
+    var e = window.navigator.userAgent;
+    return e.indexOf("Android") !== -1;
+  },
+  detectIE: function () {
+    var e = window.navigator.userAgent,
+      t = e.indexOf("MSIE ");
+    return t !== -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./);
+  },
+  detectOpera: function () {
+    var e = window.navigator.userAgent;
+    return e.indexOf("OPR") !== -1;
+  },
+  detectSafari: function () {
+    var e = window.navigator.userAgent,
+      t = e.indexOf("Safari");
+    return t !== -1 && !this.detectOpera() && !this.detectChrome(); //xzw add detectOpera
+  },
+  detectFirefox: function () {
+    var e = window.navigator.userAgent;
+    return e.indexOf("Firefox") !== -1;
+  },
+  detectChrome: function () {
+    var e = window.navigator.userAgent;
+    return e.indexOf("Chrome") !== -1 && !this.detectOpera();
+  },
+  detectAndroidMobile: function () {
+    var e = window.navigator.userAgent;
+    return this.detectAndroid() && e.indexOf("Mobile") !== -1;
+  },
+};

scene/src/utils/request.js

@@ -1,11 +1,13 @@
-import axios from 'axios'
+import axios from "axios";
 
-export const baseURL = process.env.NODE_ENV === "development" ? "https://leifengbwg.4dage.com" : "";
+// export const baseURL = process.env.NODE_ENV === "development" ? "https://leifengbwg.4dage.com" : "";
+export const baseURL = process.env.NODE_ENV === "development" ? "" : "";
 
 const service = axios.create({
-  baseURL: baseURL + "/api/",
-  timeout: 5000
-})
+  // baseURL: baseURL + "/api/",
+  baseURL: baseURL,
+  timeout: 5000,
+});
 // 请求拦截器
 // service.interceptors.request.use(function (config) {
 //   // console.log('触发拦截器')
@@ -23,17 +25,20 @@ const service = axios.create({
 // })
 
 // 添加响应拦截器
-service.interceptors.response.use(function (response) {
-  // console.log('触发相应拦截器', response)
-  // 对响应数据做点什么--response就是发送每个请求的返回值
-  // if (response.data.code === 5001 || response.data.code === 5002) {
-  //   // Toast.fail('未登录，请先登录')
-  //   localStorage.removeItem('CQLJXU_token')
-  // }
-  return response.data
-}, function (error) {
-  // 对响应错误做点什么
-  return Promise.reject(error)
-})
+service.interceptors.response.use(
+  function (response) {
+    // console.log('触发相应拦截器', response)
+    // 对响应数据做点什么--response就是发送每个请求的返回值
+    // if (response.data.code === 5001 || response.data.code === 5002) {
+    //   // Toast.fail('未登录，请先登录')
+    //   localStorage.removeItem('CQLJXU_token')
+    // }
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+  }
+);
 
-export default service
+export default service;

scene/src/view.js

@@ -1,11 +1,11 @@
 import Vue from "vue";
 import ElementUI from "element-ui";
+import 'lib-flexible/flexible'
+import "@/mixins";
 import "element-ui/lib/theme-chalk/index.css";
-import  Viewer from './pages/View.vue'
-
-window.project_env = process.env.NODE_ENV
+import Viewer from "./View.vue";
+import store from "./store";
+window.project_env = process.env.NODE_ENV;
 Vue.use(ElementUI);
 
-new Vue({
-  render: (h) => h(Viewer),
-}).$mount("#app");
+new Vue({ store, render: (h) => h(Viewer) }).$mount("#app");

scene/src/views/gui/menu.vue

@@ -10,16 +10,36 @@
       </div> -->
       <div>
         <div class="viewContainer" style="display: none !important">
-          <div id="previous" class="previous desktop-only ui-icon" style="display: none">
+          <div
+            id="previous"
+            class="previous desktop-only ui-icon"
+            style="display: none"
+          >
             <a>
-              <img rel="tooltip" title="" :src="require('@/assets/images/play.png')" width="24" height="24" data-original-title="播放" />
+              <img
+                rel="tooltip"
+                title=""
+                :src="require('@/assets/images/play.png')"
+                width="24"
+                height="24"
+                data-original-title="播放"
+              />
             </a>
           </div>
-          <div id="play" class="ui-icon" rel="tooltip" data-original-title="播放">
+          <div
+            id="play"
+            class="ui-icon"
+            rel="tooltip"
+            data-original-title="播放"
+          >
             <!-- 鼠标移入的显示 -->
             <div class="hoverTit">自动漫游</div>
             <a>
-              <img :src="require('@/assets/image/icon/tour-play.png')" width="24" height="24" />
+              <img
+                :src="require('@/assets/image/icon/tour-play.png')"
+                width="24"
+                height="24"
+              />
             </a>
           </div>
           <div id="pause" class="ui-icon" v-show="false">
@@ -27,45 +47,118 @@
             <div class="hoverTit">自动漫游</div>
 
             <a>
-              <img rel="tooltip" title="" :src="require('@/assets/image/icon/tour-pause.png')" width="24" height="24" data-original-title="暂停" />
+              <img
+                rel="tooltip"
+                title=""
+                :src="require('@/assets/image/icon/tour-pause.png')"
+                width="24"
+                height="24"
+                data-original-title="暂停"
+              />
             </a>
           </div>
-          <div id="next" class="next desktop-only ui-icon wide" style="display: none">
+          <div
+            id="next"
+            class="next desktop-only ui-icon wide"
+            style="display: none"
+          >
             <a>
-              <i rel="tooltip" title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+              <i
+                rel="tooltip"
+                title=""
+                class="icon icon-dpad-right"
+                data-original-title="下一个"
+              ></i>
             </a>
           </div>
           <div id="gui-modes-map" class="ui-icon double active">
-            <div data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览">
+            <div
+              data-original-title="导览"
+              @click="isGuide = !isGuide"
+              id="pullTab"
+              rel="tooltip"
+              title="场景导览"
+            >
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">重点展位</div>
 
-              <img title="" class="icon icon-inside" :src="require(`@/assets/image/icon/icon_point${!isGuide ? '_active' : '_normal'}.png`)" />
+              <img
+                title=""
+                class="icon icon-inside"
+                :src="
+                  require(`@/assets/image/icon/icon_point${
+                    !isGuide ? '_active' : '_normal'
+                  }.png`)
+                "
+              />
             </div>
-            <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip">
+            <div
+              title="迷你漫游"
+              data-original-title="迷你模型"
+              id="gui-modes-dollhouse"
+              rel="tooltip"
+            >
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">三维模型</div>
-              <img class="icon icon-inside" :src="require('@/assets/image/icon/icon_dollhouse_normal.png')" />
-              <img class="icon icon-inside active" :src="require('@/assets/image/icon/icon_dollhouse_active.png')" />
+              <img
+                class="icon icon-inside"
+                :src="require('@/assets/image/icon/icon_dollhouse_normal.png')"
+              />
+              <img
+                class="icon icon-inside active"
+                :src="require('@/assets/image/icon/icon_dollhouse_active.png')"
+              />
             </div>
             <!-- 热点列表 -->
             <div v-show="!hideTools" id="myHotList" @click="openTags">
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">热点列表</div>
-              <img :src="require(`@/assets/image/icon/icon_detail${openInd == 1 ? '_active' : '_normal'}.png`)" alt="" />
+              <img
+                :src="
+                  require(`@/assets/image/icon/icon_detail${
+                    openInd == 1 ? '_active' : '_normal'
+                  }.png`)
+                "
+                alt=""
+              />
             </div>
 
-            <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视">
+            <div
+              data-original-title="俯视图"
+              id="gui-modes-floorplan"
+              rel="tooltip"
+              title="顶部俯视"
+            >
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit">俯视平面</div>
-              <img class="icon icon-inside" :src="require('@/assets/image/icon/icon_floor_normal.png')" />
-              <img class="active icon icon-inside active" :src="require('@/assets/image/icon/icon_floor_active.png')" />
+              <img
+                class="icon icon-inside"
+                :src="require('@/assets/image/icon/icon_floor_normal.png')"
+              />
+              <img
+                class="active icon icon-inside active"
+                :src="require('@/assets/image/icon/icon_floor_active.png')"
+              />
             </div>
-            <div @click="onFullScreen" v-if="!isMobile" rel="tooltip" title="顶部俯视" id="gui-modes-floorplan" data-original-title="俯视图">
+            <div
+              @click="onFullScreen"
+              v-if="!isMobile"
+              rel="tooltip"
+              title="顶部俯视"
+              id="gui-modes-floorplan"
+              data-original-title="俯视图"
+            >
               <!-- 鼠标移入的显示 -->
               <div class="hoverTit" v-if="!isFullscreen">全屏</div>
               <div class="hoverTit" v-else>退出全屏</div>
-              <img class="icon icon-inside" :src="require(`@/assets/image/icon/icon_screen${isFullscreen ? '_active' : '_normal'}.png`)" />
+              <img
+                class="icon icon-inside"
+                :src="
+                  require(`@/assets/image/icon/icon_screen${
+                    isFullscreen ? '_active' : '_normal'
+                  }.png`)
+                "
+              />
             </div>
           </div>
         </div>
@@ -85,12 +178,20 @@
 
         <div id="vr" class="ui-icon wide hidden" style="display: none">
           <a>
-            <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+            <i
+              rel="tooltip"
+              title="{[{ VIEW_IN_VR }]}"
+              class="icon icon-webvr"
+            ></i>
           </a>
         </div>
         <div id="sharing" class="ui-icon wide hidden" style="display: none">
           <a>
-            <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+            <i
+              rel="tooltip"
+              title="{[{ SOCIAL_SHARING }]}"
+              class="icon icon-share"
+            ></i>
           </a>
         </div>
         <div class="pull-right terms terms2">
@@ -140,50 +241,102 @@
       </transition>
     </template>
     <template v-else>
-      <transition enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+      <transition
+        enter-active-class="animate__animated animate__fadeInUp animate__faster"
+        leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+      >
         <HotList v-if="openType === 'hots'" @close="openType = null" />
       </transition>
     </template>
 
     <!-- 自动导览 -->
-    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+    <transition
+      name="fade"
+      enter-active-class="animate__animated animate__fadeInUp animate__faster"
+      leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+    >
       <Guide v-if="showGuide" :tourList="tourList" />
     </transition>
 
     <!-- 导览底部进度 -->
-    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
+    <transition
+      name="fade"
+      enter-active-class="animate__animated animate__fadeInUp animate__faster"
+      leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+    >
       <div class="guide-progress" v-if="showGuide && guideIsPlay && isCollapse">
         <div class="progress-box">
           <div class="info">
             <span>{{ guidePlayIndex + 1 }}</span
             >of<span>{{ tourList.length }}</span>
           </div>
-          <div class="bar-box"><div :style="`width:${100 / tourList.length}%;left:${(guidePlayIndex * 100) / tourList.length}%;`" class="current-box"></div></div>
+          <div class="bar-box">
+            <div
+              :style="`width:${100 / tourList.length}%;left:${
+                (guidePlayIndex * 100) / tourList.length
+              }%;`"
+              class="current-box"
+            ></div>
+          </div>
         </div>
       </div>
     </transition>
 
     <!-- 小地图控制按钮 -->
-    <div class="minimap-controls" :class="{ open: !miniMapStatus, mobile: isMobile }" @click="toggleMiniMap()"></div>
+    <div
+      class="minimap-controls"
+      :class="{ open: !miniMapStatus, mobile: isMobile }"
+      @click="toggleMiniMap()"
+    ></div>
     <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="mode == 'dollhouse' ? ['model', 'realMap'].includes(i.type) : !['model', 'realMap'].includes(i.type)" v-for="(i, index) in leftButtons" @click.stop="hanlderButtons(i, i.type)">
+      <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="
+              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">{{ getActive(i.type) === 'active' ? (i.activeName || i.name) : i.name }}</div>
+            <div class="tip-box">
+              {{
+                getActive(i.type) === "active" ? i.activeName || i.name : i.name
+              }}
+            </div>
           </div>
         </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="kanzhanBtnVisible" class="left-btn" :class="{['show-guide']: showGuide && !isCollapse}">
-          <div class="button-item"
+      <transition
+        name="fade"
+        enter-active-class="animate__animated animate__fadeInUp animate__faster"
+        leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+      >
+        <div
+          v-show="kanzhanBtnVisible"
+          class="left-btn"
+          :class="{ ['show-guide']: showGuide && !isCollapse }"
+        >
+          <div
+            class="button-item"
             :class="getActive(i.type)"
             v-for="(i, index) in immersiveButtons"
             @click="exitImmersive"
-            >
+          >
             <img class="normal" :src="i.normalIcon" alt="" />
             <img class="active" :src="i.activeIcon" alt="" />
             <div class="tip-box">{{ i.name }}</div>
@@ -192,10 +345,21 @@
       </transition>
 
       <!-- 沉浸式看展按钮 -->
-      <div class="kanzhan-btns" :class="{['show-guide']: showGuide && !isCollapse}">
+      <div
+        class="kanzhan-btns"
+        :class="{ ['show-guide']: showGuide && !isCollapse }"
+      >
         <transition name="preScene">
-          <div v-show="kanzhanBtnVisible" @click="goScene('prev')" class="button-item">
-            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_pre.svg')" alt="" />
+          <div
+            v-show="kanzhanBtnVisible"
+            @click="goScene('prev')"
+            class="button-item"
+          >
+            <img
+              class="normal"
+              :src="require('@/assets/image/icon/new-icon/icon_pre.svg')"
+              alt=""
+            />
           </div>
         </transition>
         <transition name="activeScene">
@@ -203,9 +367,12 @@
             <div
               v-for="(i, index) in playButtons"
               :key="index"
-              v-show="(i.action == 'play' && !guideIsPlay && mode == 'panorama') || (i.action == 'pause' && guideIsPlay && mode == 'panorama')"
+              v-show="
+                (i.action == 'play' && !guideIsPlay && mode == 'panorama') ||
+                (i.action == 'pause' && guideIsPlay && mode == 'panorama')
+              "
               class="button-item2 button-item"
-              :class="{pause: i.action === 'pause'}"
+              :class="{ pause: i.action === 'pause' }"
               @click.stop="hanlderButtons(i, i.type)"
             >
               <template v-if="i.action !== 'pause'">
@@ -217,8 +384,16 @@
           </div>
         </transition>
         <transition name="nextScene">
-          <div v-show="kanzhanBtnVisible" class="button-item" @click="goScene('next')">
-            <img class="normal" :src="require('@/assets/image/icon/new-icon/icon_next.svg')" alt="" />
+          <div
+            v-show="kanzhanBtnVisible"
+            class="button-item"
+            @click="goScene('next')"
+          >
+            <img
+              class="normal"
+              :src="require('@/assets/image/icon/new-icon/icon_next.svg')"
+              alt=""
+            />
           </div>
         </transition>
       </div>
@@ -231,22 +406,41 @@
           :class="getActive(i.type)"
           @click.stop="hanlderButtons(i, i.type)"
           v-for="(i, index) in mobileTopBtns"
-          v-show="mode == 'dollhouse' ? ['model', 'realMap'].includes(i.type) : openType === 'immersive' ? ['immersive'].includes(i.type) : !['model', 'realMap'].includes(i.type)"
+          v-show="
+            mode == 'dollhouse'
+              ? ['model', 'realMap'].includes(i.type)
+              : openType === 'immersive'
+              ? ['immersive'].includes(i.type)
+              : !['model', 'realMap'].includes(i.type)
+          "
         >
           <img class="normal" :src="i.normalIcon" alt="" />
           <img class="active" :src="i.activeIcon" alt="" />
         </div>
       </div>
-      <div class="mobile-bottom-button" :class="{ center: openType == 'immersive', ['show-guide']: showGuide && !isCollapse }">
-        <template 
-          v-for="(i, index) in mobileBottomBtns"
-        >
+      <div
+        class="mobile-bottom-button"
+        :class="{
+          center: openType == 'immersive',
+          ['show-guide']: showGuide && !isCollapse,
+        }"
+      >
+        <template v-for="(i, index) in mobileBottomBtns">
           <div
-            v-if="kanzhanBtnVisible ? i.type == 'controls' : i.type !== 'controls'"
+            v-if="
+              kanzhanBtnVisible ? i.type == 'controls' : i.type !== 'controls'
+            "
             :key="index"
             class="button-item"
-            :class="`${getBottomActive(i.type)} ${i.action === 'play' && guideIsPlay && 'active pause'}`"
-            :style="`display:${(['hots', 'route'].includes(i.type) && openType == 'immersive') || mode === 'dollhouse' ? 'none' : 'block'};`"
+            :class="`${getBottomActive(i.type)} ${
+              i.action === 'play' && guideIsPlay && 'active pause'
+            }`"
+            :style="`display:${
+              (['hots', 'route'].includes(i.type) && openType == 'immersive') ||
+              mode === 'dollhouse'
+                ? 'none'
+                : 'block'
+            };`"
             @click.stop="hanlderButtons(i, i.type)"
           >
             <img class="normal" :src="i.normalIcon" alt="" />
@@ -256,25 +450,53 @@
       </div>
     </template>
     <!-- 音乐按钮 -->
-    <transition name="fade" enter-active-class="animate__animated animate__fadeInUp animate__faster" leave-active-class="animate__animated animate__fadeOutDown animate__faster">
-      <div class="right-btn"
-        :class="{ mobile: isMobile, ['show-guide']: showGuide && !isCollapse}"
+    <transition
+      name="fade"
+      enter-active-class="animate__animated animate__fadeInUp animate__faster"
+      leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+    >
+      <div
+        class="right-btn"
+        :class="{ mobile: isMobile, ['show-guide']: showGuide && !isCollapse }"
       >
-        <div id="bgm" class="button-item" :class="getActive(i.type)" v-for="(i, index) in rightButtons">
-          <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
+          id="bgm"
+          class="button-item"
+          :class="getActive(i.type)"
+          v-for="(i, index) in rightButtons"
+        >
+          <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 v-if="!isMobile" class="tip-box">{{ i.name }}</div>
         </div>
       </div>
     </transition>
     <transition name="tour">
-      <TourList :tourList="tourList" v-if="openType == 'tour'" @close="openType = null"> </TourList>
+      <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="mapVisible" @close="() => {
-        openType = null
-        mapVisible = false
-      }"> </LayerMap>
+    <transition
+      name="fade"
+      enter-active-class="animate__animated animate__fadeIn animate__faster"
+      leave-active-class="animate__animated animate__fadeOut animate__faster"
+    >
+      <LayerMap v-if="mapVisible" @close="closeLayer"> </LayerMap>
     </transition>
   </div>
 </template>
@@ -423,13 +645,19 @@ export default {
           type: "immersive",
           handler: () => {
             if (!this.openType) {
-              this.openType = 'immersive'
-              this.setData({ showGuide: true, guideIsPlay: true, isCollapse: false });
+              this.openType = "immersive";
+              this.setData({
+                showGuide: true,
+                guideIsPlay: true,
+                isCollapse: false,
+              });
               if (!this.tourList.length) {
-                this.tourList = window.player ? player?.model?.heroLocations : [];
+                this.tourList = window.player
+                  ? player?.model?.heroLocations
+                  : [];
               }
-            } else this.exitImmersive()
-          }
+            } else this.exitImmersive();
+          },
         },
       ],
       mobileBottomBtns: [
@@ -471,7 +699,7 @@ export default {
           type: "controls",
         },
       ],
-      mapVisible: false
+      mapVisible: false,
     };
   },
   watch: {
@@ -479,10 +707,13 @@ export default {
       handler(val, old) {
         if (val) {
           //导览播放
-          settings.playTourNearBy ? player.director.playTourNearBy() : player.director.playTour();
+          settings.playTourNearBy
+            ? player.director.playTourNearBy()
+            : player.director.playTour();
         } else {
           // 导览结束
-          player.director.tourInProgress && (player.director.stopTour(), player.director.endTourProgress()); 
+          player.director.tourInProgress &&
+            (player.director.stopTour(), player.director.endTourProgress());
         }
       },
     },
@@ -506,15 +737,21 @@ export default {
   computed: {
     ...mapGetters({
       points: "points",
+      flyInModel: "flyInModel",
       showGuide: "showGuide",
       guideIsPlay: "guideIsPlay",
       isCollapse: "isCollapse",
       guidePlayIndex: "guidePlayIndex",
     }),
-    kanzhanBtnVisible: (v) => v.openType === 'immersive' || v.showGuide
+    kanzhanBtnVisible: (v) => v.openType === "immersive" || v.showGuide,
   },
   mounted() {
-    let events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
+    let events = [
+      "fullscreenchange",
+      "webkitfullscreenchange",
+      "mozfullscreenchange",
+      "MSFullscreenChange",
+    ];
     events.forEach((item, index) => {
       window.addEventListener(item, () => {
         this.isFullscreen = !this.isFullscreen;
@@ -527,8 +764,12 @@ export default {
       // }, 100);
       window.addEventListener("playerAndModelReady", () => {
         this.loaded = true;
+        // player.on("flying.started", (a, b, c, e) => {
+        //     window.parent.window.setMode(e.model.mode);
+        // });
         player.on("flying.ended", () => {
           this.mode = player.mode;
+          window.parent.window.setMode(this.mode);
           if (this.mode == "dollhouse") {
             $(".cad").hide();
             $(".minimap-controls").hide();
@@ -547,14 +788,14 @@ export default {
           let n = player.director.describe();
           this.setData({ guideIsPlay: n.tourIsPlaying });
 
-          console.log(n.tourIsPlaying, '==')
-          if (n.tourIsPlaying && this.openType !== 'immersive') {
-            this.hanlderButtons(this.leftButtons[5],'immersive')
+          console.log(n.tourIsPlaying, "==");
+          if (n.tourIsPlaying && this.openType !== "immersive") {
+            this.hanlderButtons(this.leftButtons[5], "immersive");
           }
           if (null !== n.currentItem) {
             //n.currentItem是二维数组，代表导览中的两层，导览图片展示的是外层的，也就是数据第一个元素。
             //if (this.guideIsPlay) { //导览片段的选中与当前点位所属片段对应。
-              this.setData({ guidePlayIndex: n.currentItem[0] });
+            this.setData({ guidePlayIndex: n.currentItem[0] });
             //}
           } else {
             this.setData({ guidePlayIndex: -1 });
@@ -562,6 +803,13 @@ export default {
         });
 
         this.getPoints();
+        let flyInModel = localStorage.getItem("flyInModel") || false;
+
+        if (flyInModel) {
+          player.FlyToMode("dollhouse");
+          this.mode = "dollhouse";
+          localStorage.removeItem("flyInModel");
+        }
       });
     };
     initListener();
@@ -569,6 +817,13 @@ export default {
   },
   methods: {
     ...mapMutations(["setData", "setPanoOver"]),
+    closeLayer() {
+      this.mapVisible = false;
+      this.openType = null;
+      if (this.mode == "dollhouse") {
+        window.parent.window.setMode(this.mode);
+      }
+    },
     handleTour() {
       this.setData({ guideIsPlay: !this.guideIsPlay });
       // if (this.guideIsPlay) {
@@ -592,14 +847,14 @@ export default {
       }
     },
     goScene(type) {
-      window.tourPlayCtl.go(type === 'prev' ? -1 : 1)
+      window.tourPlayCtl.go(type === "prev" ? -1 : 1);
     },
     toggleMiniMap() {
       this.miniMapStatus = !this.miniMapStatus;
     },
 
     exitImmersive() {
-      this.openType = null
+      this.openType = null;
       this.setData({ showGuide: false, guideIsPlay: false });
     },
     hanlderButtons(item, type) {
@@ -607,19 +862,23 @@ export default {
       if (player.flying) return;
 
       if (item.handler) {
-        item.handler()
-        return
+        item.handler();
+        return;
       }
       if (!["route", "fullScreen", "controls", "guide"].includes(type)) {
         if (this.openType != type) {
           this.openType = type;
 
-          if (type === 'immersive') {
-            this.setData({ showGuide: true, isCollapse: false, guideIsPlay: true });
+          if (type === "immersive") {
+            this.setData({
+              showGuide: true,
+              isCollapse: false,
+              guideIsPlay: true,
+            });
             if (!this.tourList.length) {
               this.tourList = window.player ? player?.model?.heroLocations : [];
             }
-            return
+            return;
           }
         } else {
           this.openType = null;
@@ -638,10 +897,14 @@ export default {
         case "model":
           player.FlyToMode("panorama");
           this.mode = "panorama";
+          window.parent.window.setMode(this.mode);
           break;
         case "realMap":
-          this.openType = 'realMap';
+          this.openType = "realMap";
           this.mapVisible = true;
+          if (this.mode == "dollhouse") {
+            window.parent.window.setMode(null);
+          }
           break;
         case "map":
           if (player.mode == "dollhouse") {
@@ -651,6 +914,7 @@ export default {
             player.FlyToMode("dollhouse");
             this.mode = "dollhouse";
           }
+          window.parent.window.setMode(this.mode);
           break;
         case "tour":
           if (!this.tourList.length) {
@@ -665,7 +929,7 @@ export default {
           this.onFullScreen();
           break;
         case "controls":
-          if (item.name == '自动导览') {
+          if (item.name == "自动导览") {
             this.setData({ showGuide: true, guideIsPlay: !this.guideIsPlay });
             if (!this.tourList.length) {
               this.tourList = window.player ? player?.model?.heroLocations : [];
@@ -1090,7 +1354,7 @@ export default {
   align-items: center;
   flex-direction: row;
   gap: 0.6667rem;
-  transition: bottom linear .2s;
+  transition: bottom linear 0.2s;
   &.show-guide {
     bottom: 145px !important;
   }
@@ -1117,7 +1381,7 @@ export default {
       }
     }
     &.pause {
-      background-image: url('../../assets/image/icon/new-icon/icon_play.png');
+      background-image: url("../../assets/image/icon/new-icon/icon_play.png");
       background-repeat: no-repeat;
       background-size: auto 44px;
       animation: mobile-play 2s steps(48) infinite;
@@ -1308,7 +1572,7 @@ export default {
     &.pause {
       width: 56px;
       height: 56px;
-      background-image: url('../../assets/image/icon/new-icon/icon_play.png');
+      background-image: url("../../assets/image/icon/new-icon/icon_play.png");
       background-repeat: no-repeat;
       animation: play 2s steps(48) infinite;