tremble hace 2 años
padre
commit
bf74f5cccd
Se han modificado 31 ficheros con 365 adiciones y 96 borrados
  1. 12 8
      packages/qjkankan-editor/src/components/shared/Editor.vue
  2. 1 1
      packages/qjkankan-editor/src/framework/EditorHead.vue
  3. 3 1
      packages/qjkankan-editor/src/framework/play/pano/components/list.vue
  4. 1 0
      packages/qjkankan-editor/src/views/base/Toolbar.vue
  5. 1 1
      packages/qjkankan-kankan-view/.env
  6. 1 1
      packages/qjkankan-kankan-view/.env.development
  7. 1 1
      packages/qjkankan-kankan-view/.env.prod
  8. 2 2
      packages/qjkankan-kankan-view/public/smg.html
  9. 2 2
      packages/qjkankan-kankan-view/public/spg.html
  10. 10 1
      packages/qjkankan-kankan-view/src/components/Tags/index.vue
  11. 48 12
      packages/qjkankan-kankan-view/src/components/Tags/show-tag.vue
  12. 10 0
      packages/qjkankan-kankan-view/src/store/index.js
  13. 27 0
      packages/qjkankan-view/package-lock.json
  14. 3 2
      packages/qjkankan-view/package.json
  15. 2 2
      packages/qjkankan-view/public/showviewer/lib/krpano/plugins/webvr.xml
  16. 14 0
      packages/qjkankan-view/src/components/Fdkk/index.vue
  17. 0 2
      packages/qjkankan-view/src/components/Fdkk/v3fdkkmobile/iframe.vue
  18. 13 5
      packages/qjkankan-view/src/components/Pano/index.vue
  19. 12 11
      packages/qjkankan-view/src/components/UIGather/control.vue
  20. 2 1
      packages/qjkankan-view/src/components/UIGather/list.vue
  21. 13 4
      packages/qjkankan-view/src/components/UIGather/menu.vue
  22. 40 19
      packages/qjkankan-view/src/components/UIGather/mobile/control.fdkk.vue
  23. 5 3
      packages/qjkankan-view/src/components/UIGather/mobile/control.pano.vue
  24. 0 1
      packages/qjkankan-view/src/components/UIGather/mobile/control.vue
  25. 5 1
      packages/qjkankan-view/src/components/UIGather/mobile/index.vue
  26. 3 0
      packages/qjkankan-view/src/pages/show.js
  27. 1 2
      packages/qjkankan-view/src/pages/showMobile.vue
  28. 5 0
      packages/qjkankan-view/src/sdk/QJKanKan/modules/Scene.js
  29. 0 12
      packages/qjkankan-view/src/utils/fns/DomResize.js
  30. 127 0
      packages/qjkankan-view/src/utils/fns/ToolTip.js
  31. 1 1
      packages/qjkankan-view/src/utils/sound.js

+ 12 - 8
packages/qjkankan-editor/src/components/shared/Editor.vue

@@ -3,13 +3,13 @@
 </template>
 <script>
 import config from "../../config";
- 
+
 // import { htmlCut } from "../../utils/string";
 export default {
     props: {
         placeholder: String,
         maxlength: Number,
-        html:String
+        html: String
     },
     mounted() {
         this.quill = new Quill(this.$el, {
@@ -71,12 +71,13 @@ export default {
         // });
 
         this.quill.on("text-change", (delta, old, source) => {
-            let html = this.quill.root.innerHTML;
+            let html = this.quill.root.innerHTML == '<p><br></p>' ? '' : this.quill.root.innerHTML;
+            console.dir(this.quill.root, 'wdwdwd');
             // 过滤emoji表情
-            html = html.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function(char) {
+            html = html.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
                 var H, L, code;
                 if (char.length === 2) {
-                  return ""
+                    return ""
                 } else {
                     return char;
                 }
@@ -128,16 +129,19 @@ export default {
 <style lang="less">
 .com-editor {
     height: 100%;
-    padding:0 0 30px 0;
+    padding: 0 0 30px 0;
+
     .ql-editor {
         padding: 10px;
         user-select: auto;
         font-size: 14px;
         white-space: normal !important;
-        a{
+
+        a {
             color: @color;
         }
     }
+
     .ql-editor.ql-blank::before {
         left: 10px;
         right: 10px;
@@ -145,7 +149,7 @@ export default {
         color: #888888;
     }
 
-    .ql-clipboard{
+    .ql-clipboard {
         left: -100000px;
         height: 1px;
         overflow-y: hidden;

+ 1 - 1
packages/qjkankan-editor/src/framework/EditorHead.vue

@@ -14,7 +14,7 @@
       <i class="iconfont iconeditor_save"></i>
       保存
     </div>
-    <preview v-if="info" :name="info.name" :show="showPreview" :ifr="`./show.html?id=${info.id}`" @close="showPreview = false" />
+    <preview v-if="info" :name="info.name" :show="showPreview" :ifr="`./show.html?id=${info.id}&rnd=${Math.random()}`" @close="showPreview = false" />
   </header>
 </template>
 <script>

+ 3 - 1
packages/qjkankan-editor/src/framework/play/pano/components/list.vue

@@ -35,7 +35,8 @@
       </div>
     </div>
 
-    <div class="swiper-container" :style="`width:${catalogRootW}px`" id="swcatalogRoot" ref="sw2"
+    <div class="swiper-container"
+    :style="`width:${catalogRootW>innerW?'100%':(catalogRootW+'px')}`" id="swcatalogRoot" ref="sw2"
       v-swiper:mySwiperb="swiperOptions" v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1">
       <ul class="swiper-wrapper" v-if="metadata.catalogRoot.length > 1">
         <li class="swiper-slide" :class="{
@@ -63,6 +64,7 @@ export default {
     return {
       spanlength: 6,
       show: false,
+      innerW:1150,
       swidth: {
         "swcatalogRoot": 104,
         "swSecondary": 84,

+ 1 - 0
packages/qjkankan-editor/src/views/base/Toolbar.vue

@@ -141,6 +141,7 @@ export default {
       });
     },
     onEditorChange(content){
+      console.log(content);
       this.info.description = content.html
       this.jianjieLength = content.size
     },

+ 1 - 1
packages/qjkankan-kankan-view/.env

@@ -4,7 +4,7 @@ VUE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 # 静态资源地址
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/sdk/4.3.4-alpha.2/
+VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/www/sdk/
 
 
 # 静态资源目录

+ 1 - 1
packages/qjkankan-kankan-view/.env.development

@@ -5,7 +5,7 @@ VUE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 # VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4/www/sdk/
-VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/sdk/4.3.4-alpha.2/
+VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/www/sdk/
 
 
 

+ 1 - 1
packages/qjkankan-kankan-view/.env.prod

@@ -6,7 +6,7 @@ VUE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 VUE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 # VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4/www/sdk/
-VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/sdk/4.3.4-alpha.2/
+VUE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/www/sdk/
 
 
 

+ 2 - 2
packages/qjkankan-kankan-view/public/smg.html

@@ -27,8 +27,8 @@
 
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
         
-        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk-deps.js?v=4.3.2-alpha.0"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk.js?v=4.3.2-alpha.0"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk-deps.js?v=4.4.0-alpha.7"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk.js?v=4.4.0-alpha.7"></script>
 
         <!-- <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.44"></script>
         <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk.js?v=4.0.0-alpha.44"></script> -->

+ 2 - 2
packages/qjkankan-kankan-view/public/spg.html

@@ -17,8 +17,8 @@
         </noscript>
         <div id="app"></div>
         
-        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk-deps.js?v=4.3.2-alpha.0"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk.js?v=4.3.2-alpha.0"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk-deps.js?v=4.4.0-alpha.7"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>kankan-sdk.js?v=4.4.0-alpha.7"></script>
 
         <!-- built files will be auto injected -->
     </body>

+ 10 - 1
packages/qjkankan-kankan-view/src/components/Tags/index.vue

@@ -94,7 +94,16 @@ const closeTag = async () => {
     if (!app.Scene.isCurrentPanoHasVideo && !player.isPlaying) {
         if (hotData.value.type == 'audio' || hotData.value.type == 'video') {
             // console.log('resume')
-            musicPlayer.resume()
+            window.parent.postMessage(
+            {
+                source: "qjkankan",
+                event: "toggleBgmStatus",
+                params: {
+                    status: true,
+                },
+            },
+            "*"
+        );
         }
     }
 

+ 48 - 12
packages/qjkankan-kankan-view/src/components/Tags/show-tag.vue

@@ -4,13 +4,16 @@
         <div class="tag-title">
             <h2>
                 {{ hotData.title }}
-                <ui-audio v-if="hotData.type == 'audio' && audioInfo.length > 0" class="audio" ref="audio" :src="common.changeUrl(audioInfo[0].src)"></ui-audio>
+                <ui-audio v-if="hotData.type == 'audio' && audioInfo.length > 0" class="audio" ref="audio"
+                    :src="common.changeUrl(audioInfo[0].src)"></ui-audio>
             </h2>
         </div>
         <div class="desc" v-if="hotData.content != ''">
             <div class="text" v-html="hotData.content"></div>
         </div>
-        <div class="tag-metas" @click.stop="open" :class="{ mask: hotData.type == 'link', nocursor: hotData.type == 'video' }" v-if="hotData.media[hotData.type].length > 0 && hotData.type != 'audio'">
+        <div class="tag-metas" @click.stop="open"
+            :class="{ mask: hotData.type == 'link', nocursor: hotData.type == 'video' }"
+            v-if="hotData.media[hotData.type].length > 0 && hotData.type != 'audio'">
             <metasImage v-if="hotData.type == 'image'" />
             <metasVideo v-if="hotData.type == 'video'" />
             <metasWeb v-if="hotData.type == 'link'" />
@@ -37,7 +40,19 @@ const emit = defineEmits(['open'])
 const hotData = computed(() => {
     let data = store.getters['tag/hotData']
     if (data.type == 'audio' || data.type == 'video') {
-        musicPlayer.pause(true)
+        // musicPlayer.pause(true)
+        // console.log('1qwdq');
+        window.parent.postMessage(
+            {
+                source: "qjkankan",
+                event: "toggleBgmStatus",
+                params: {
+                    status: false,
+                },
+            },
+            "*"
+        );
+
     }
     return data
 })
@@ -60,15 +75,15 @@ const open = () => {
     if (hotData.value.type != 'video') {
         emit('open')
         window.parent.postMessage(
-        {
-            source: "qjkankan",
-            event: "toggleFdkkHotspot",
-            params: {
-                status: 'open',
+            {
+                source: "qjkankan",
+                event: "toggleFdkkHotspot",
+                params: {
+                    status: 'open',
+                },
             },
-        },
-        "*"
-    );
+            "*"
+        );
         console.log(111111);
     }
 }
@@ -76,7 +91,7 @@ const open = () => {
 //     store.commit('tag/edit')
 //     store.commit('tag/gotoTag', hotData.value)
 // }
-onMounted(() => {})
+onMounted(() => { })
 </script>
 <style lang="scss" scoped>
 .show-tag {
@@ -88,18 +103,22 @@ onMounted(() => {})
     min-width: 400px;
     // min-height: 100px;
     padding: 30px 20px;
+
     .edit-btn {
         margin-top: 20px;
         text-align: right;
+
         span {
             font-size: 14px;
             color: rgba(255, 255, 255, 0.6);
             cursor: pointer;
+
             &:hover {
                 color: #fff;
             }
         }
     }
+
     .tag-metas {
         width: 100%;
         height: 225px;
@@ -109,9 +128,11 @@ onMounted(() => {})
         position: relative;
         cursor: -webkit-zoom-in;
         margin-top: 20px;
+
         &.nocursor {
             cursor: auto;
         }
+
         &.mask {
             &::after {
                 content: '';
@@ -124,16 +145,20 @@ onMounted(() => {})
             }
         }
     }
+
     .tag-title {
         word-break: break-all;
+
         h2 {
             font-size: 20px;
             // margin-bottom: 10px;
             line-height: 30px;
             color: #ffffff;
             position: relative;
+
             .ui-audio {
                 float: right;
+
                 &.audio {
                     display: inline-block;
                     cursor: pointer;
@@ -141,8 +166,10 @@ onMounted(() => {})
             }
         }
     }
+
     .desc {
         margin-top: 10px;
+
         .text {
             font-size: 14px;
             color: #999999;
@@ -152,6 +179,7 @@ onMounted(() => {})
         }
     }
 }
+
 [is-mobile] {
     .show-tag {
         pointer-events: auto;
@@ -166,15 +194,18 @@ onMounted(() => {})
         .edit-btn {
             margin-top: 0.2667rem;
             text-align: right;
+
             span {
                 font-size: 0.1867rem;
                 color: rgba(255, 255, 255, 0.6);
                 cursor: pointer;
+
                 &:hover {
                     color: #fff;
                 }
             }
         }
+
         .tag-metas {
             width: 100%;
             height: 4.2667rem;
@@ -184,6 +215,7 @@ onMounted(() => {})
             position: relative;
             cursor: -webkit-zoom-in;
             margin-top: 0.4rem;
+
             &.mask {
                 &::after {
                     content: '';
@@ -196,14 +228,17 @@ onMounted(() => {})
                 }
             }
         }
+
         .tag-title {
             h2 {
                 font-size: 0.5333rem;
                 line-height: 0.8rem;
                 color: #ffffff;
                 position: relative;
+
                 .ui-audio {
                     float: right;
+
                     &.audio {
                         display: inline-block;
                         cursor: pointer;
@@ -211,6 +246,7 @@ onMounted(() => {})
                 }
             }
         }
+
         .desc {
             margin-bottom: 0.2933rem;
 

+ 10 - 0
packages/qjkankan-kankan-view/src/store/index.js

@@ -124,6 +124,16 @@ const store = createStore({
         showVR(state) {
             state.player.showVR = !state.player.showVR
             state.player.showWidgets = !state.player.showWidgets
+            window.parent.postMessage(
+                {
+                    source: "qjkankan",
+                    event: "setVR",
+                    params: {
+                        status: state.player.showVR,
+                    },
+                },
+                "*"
+            );
             getApp().Camera.vr()
         },
         setControlsBottom(state, payload) {

+ 27 - 0
packages/qjkankan-view/package-lock.json

@@ -8,6 +8,7 @@
       "name": "@qjkankan/view",
       "version": "1.2.0",
       "dependencies": {
+        "@floating-ui/dom": "^1.0.4",
         "axios": "^0.27.2",
         "clipboard": "^2.0.11",
         "core-js": "^3.8.3",
@@ -1792,6 +1793,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.0.1.tgz",
+      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.0.4.tgz",
+      "integrity": "sha512-maYJRv+sAXTy4K9mzdv0JPyNW5YPVHrqtY90tEdI6XNpuLOP26Ci2pfwPsKBA/Wh4Z3FX5sUrtUFTdMYj9v+ug==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.1"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -12503,6 +12517,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.0.1.tgz",
+      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.0.4.tgz",
+      "integrity": "sha512-maYJRv+sAXTy4K9mzdv0JPyNW5YPVHrqtY90tEdI6XNpuLOP26Ci2pfwPsKBA/Wh4Z3FX5sUrtUFTdMYj9v+ug==",
+      "requires": {
+        "@floating-ui/core": "^1.0.1"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",

+ 3 - 2
packages/qjkankan-view/package.json

@@ -9,19 +9,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "photoswipe": "^5.2.2",
+    "@floating-ui/dom": "^1.0.4",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
+    "photoswipe": "^5.2.2",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.13",
     "vue-i18n": "^9.1.10",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@intlify/vue-i18n-loader": "^4.2.0",
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@intlify/vue-i18n-loader": "^4.2.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",

+ 2 - 2
packages/qjkankan-view/public/showviewer/lib/krpano/plugins/webvr.xml

@@ -216,10 +216,10 @@
 		stopdelayedcall(vr_button_fadeout);
 		if(webvr.ismobilevr,
 			tween(layer[webvr_exitbutton].alpha|layer[webvr_setupbutton].alpha, 1.0|1.0, 0.25);
-			delayedcall(vr_button_fadeout, 3.0, tween(layer[webvr_exitbutton].alpha|layer[webvr_setupbutton].alpha, 0.0|0.0, 1.0); );
+			delayedcall(vr_button_fadeout, 0.5, tween(layer[webvr_exitbutton].alpha|layer[webvr_setupbutton].alpha, 0.0|0.0, 1.0); );
 		  ,
 			tween(layer[webvr_exitbutton].alpha, 1.0, 0.25);
-			delayedcall(vr_button_fadeout, 3.0, tween(layer[webvr_exitbutton].alpha, 0.0, 1.0); );
+			delayedcall(vr_button_fadeout, 0.5, tween(layer[webvr_exitbutton].alpha, 0.0, 1.0); );
 		  );
 	</action>
 

+ 14 - 0
packages/qjkankan-view/src/components/Fdkk/index.vue

@@ -30,6 +30,7 @@ import { useMusicPlayer } from '@/utils/sound'
 import v3mobile from "./v3fdkkmobile/iframe.vue";
 import { getApp } from '@/app'
 
+const musicPlayer = useMusicPlayer()
 
 const store = useStore();
 const isMobile = computed(() => browser.isMobile());
@@ -73,6 +74,11 @@ const handleMessage = (res) => {
       store.commit('fdkk/setMode', params.mode)
     }
 
+
+    if (event == "setVR") {
+      store.commit("functions/setVrStatus", params.status);
+    }
+
     //场景本身的背景音乐 (同时可判断场景已经加载完成)
     if (event == "fdkkBgmLink") {
       store.commit('fdkk/setFdkkBGM', params.music)
@@ -96,7 +102,15 @@ const handleMessage = (res) => {
         store.commit("functions/setShowScenesList", false);
         store.commit('fdkk/setShowToursList', false)
       }
+    }
+
+    if (event == "toggleBgmStatus") {
+      if (params.status) {
+        musicPlayer.resume()
+      } else {
+        musicPlayer.pause(true)
 
+      }
     }
 
   }

+ 0 - 2
packages/qjkankan-view/src/components/Fdkk/v3fdkkmobile/iframe.vue

@@ -65,12 +65,10 @@ export default {
           // this.$bus.emit("currentMode", e.data.params);
 
           if (e.data.params.type == "playMusic") {
-            console.log(e.data.params.data.status, "e.daplayMusicplayMusicta");
             this.bgmstatus = e.data.params.data.status;
           }
 
           if (e.data.params.type == "mode") {
-
             if (e.data.params.data.mode != 'pano') {
               this.store.commit("functions/setShowScenesList", false)
             }

+ 13 - 5
packages/qjkankan-view/src/components/Pano/index.vue

@@ -38,9 +38,10 @@ const loadScene = async (currentScene) => {
   }
 };
 
-watch(currentScene, (newVal) => {
+watch(currentScene, (newVal, oldVal) => {
   history.replaceState(null, null, "".concat(window.location.pathname, "?").concat(`id=${metadata.value.id}&vr=${newVal.sceneCode}`));
 
+  store.commit('fdkk/setFdkkBGM', '')
   //默认版本是v4
   store.commit("scene/setFdkkCurrentVersion", 'v4');
   if (newVal.type == 'pano') {
@@ -54,19 +55,26 @@ watch(currentScene, (newVal) => {
     });
   } else {
     getFdkkInfo({ num: newVal.sceneCode }).then((data) => {
+
       if (data.data.isUpgrade != void 0) {
         store.commit("scene/setFdkkCurrentVersion", data.data.isUpgrade !== 0 ? 'v4' : 'v3');
         if (data.data.isUpgrade === 0) {
           // 该v3场景有背景音乐
-          if (!browser.isMobile()) {
-            if (data.data.bgMusic && data.data.bgMusic != 'noMusic') {
-              musicPlayer.pause()
-            } 
+          if (data.data.bgMusic && data.data.bgMusic != '0' && data.data.bgMusic != 'noMusic') {
+            musicPlayer.pauseFromOther = true
+            musicPlayer.pause()
           }
         }
       }
+
+      if (oldVal.type == '4dkk') {
+        store.commit('fdkk/setFdkkBGM', '')
+        useMusicPlayer.player.watchPlay(true)
+      }
     })
   }
+}, {
+  deep: true
 });
 
 const updateListPosi = () => {

+ 12 - 11
packages/qjkankan-view/src/components/UIGather/control.vue

@@ -2,46 +2,46 @@
   <ul class="control"  v-show="fdkkCurrentVersion == 'v4'">
 
     <!-- 自定义链接 -->
-    <li @click="onLink" v-if="customLink && customLink.isShow">
+    <li @click="onLink" v-tooltip="customLink.name" v-if="customLink && customLink.isShow">
       <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
     </li>
 
     <!-- 联系电话 -->
-    <li @click="onTelephone" v-if="customTelephone && customTelephone.isShow">
+    <li @click="onTelephone" v-tooltip="customTelephone.name" v-if="customTelephone && customTelephone.isShow">
       <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
     </li>
 
     <!-- 简介 -->
-    <li @click="onIntroduce" v-if="metadata.description">
+    <li @click="onIntroduce"  v-tooltip="'简介'" v-if="metadata.description">
       <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
     </li>
 
     <!-- 背景音乐 -->
-    <li @click="onIsBGM" v-if="metadata.backgroundMusic && metadata.backgroundMusic.id">
+    <li @click="onIsBGM" v-tooltip="'音乐'" v-if="(metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM">
       <img :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
     </li>
 
     <!-- 解说音频 -->
-    <li @click="onIsCommentary" v-if="currentScene.explanation && currentScene.explanation.audioUrl">
+    <li @click="onIsCommentary" v-tooltip="'讲解'" v-if="currentScene.explanation && currentScene.explanation.audioUrl">
       <img
         :src="require(`@/assets/images/icon/${showCommentaryPlaying ? 'commentary@2x.png' : 'commentary_disabled@2x.png'}`)"
         alt="" />
     </li>
 
-    <li @click="onIsAutoRotate" v-if="currentScene.type != '4dkk'">
+    <li @click="onIsAutoRotate" v-tooltip="'巡游'" v-if="currentScene.type != '4dkk'">
       <img :src="require(`@/assets/images/icon/${isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'}`)"
         alt="" />
     </li>
 
-    <li @click="onVR" v-if="currentScene.type != '4dkk'">
+    <li @click="onVR" v-tooltip="'VR'" v-if="currentScene.type != '4dkk'">
       <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
     </li>
 
-    <li @click="onShare">
+    <li @click="onShare" v-tooltip="'分享'">
       <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
     </li>
 
-    <li @click="onFullScreen">
+    <li @click="onFullScreen" v-tooltip="'全屏'">
       <img :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)" alt="" />
     </li>
 
@@ -91,6 +91,8 @@ const customTelephone = computed(() => store.getters["scene/customTelephone"]);
 const customLink = computed(() => store.getters["scene/customLink"]);
 
 const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
+const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);
+
 
 
 watchEffect(() => {
@@ -116,8 +118,6 @@ watchEffect(() => {
     useSoundPlayer.player.isLock = true
     soundPlayer.pause()
   }
-
-
 })
 
 
@@ -258,6 +258,7 @@ soundPlayer.on('play', () => {
 
 })
 soundPlayer.on('pause', () => {
+  console.log(11111);
   showCommentaryPlaying.value = false
 })
 

+ 2 - 1
packages/qjkankan-view/src/components/UIGather/list.vue

@@ -36,7 +36,7 @@
     </div>
 
     <div class="swiper-container" id="swcatalogRoot"
-    :style="`width:${catalogRootW}px`"
+    :style="`width:${catalogRootW>innerW?'100%':(catalogRootW+'px')}`"
       v-if="metadata.catalogRoot.length > 0 && metadata.catalogs.length > 1">
       <ul class="swiper-wrapper" v-if="metadata.catalogRoot.length > 1">
         <li class="swiper-slide" :class="{
@@ -84,6 +84,7 @@ const swidth = ref({
 const scenesListW = computed(()=>currentScenesList.value.length * (swidth.value['swScenes'] + 10) - 10)
 const secondaryW = computed(()=>secondaryList.value.length * (swidth.value['swSecondary'] + 10) - 10)
 const catalogRootW = computed(()=>metadata.value.catalogRoot.length * (swidth.value['swcatalogRoot'] + 10) - 10)
+const innerW = computed(() => 1150)
 
 
 

+ 13 - 4
packages/qjkankan-view/src/components/UIGather/menu.vue

@@ -1,6 +1,7 @@
 <template>
   <ul class="menu">
     <li @click="onIsShowList"
+      v-tooltip="'场景导览'"
       v-if="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)">
       <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)"
         alt="" />
@@ -13,19 +14,25 @@
 
     <template v-if="currentScene.type == '4dkk'">
 
-      <li v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
+      <li
+      v-tooltip="'漫游'"
+       v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
         @click="onModeChange('panorama')">
         <img :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected' : 'roaming_normal'}@2x.png`)"
           alt="" />
       </li>
 
-      <li v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan" :class="{ disabled: isPlayTours || flying }"
+      <li
+      v-tooltip="'平面'"
+      v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan" :class="{ disabled: isPlayTours || flying }"
         @click="onModeChange('floorplan')">
         <img :src="require(`@/assets/images/icon/${mode == 'floorplan' ? 'plane_selected' : 'plane_normal'}@2x.png`)"
           alt="" />
       </li>
 
-      <li v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse" :class="{ disabled: isPlayTours || flying }"
+      <li
+      v-tooltip="'三维'"
+       v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse" :class="{ disabled: isPlayTours || flying }"
         @click="onModeChange('dollhouse')">
         <img :src="require(`@/assets/images/icon/${mode == 'dollhouse' ? '3d_selected' : '3d_normal'}@2x.png`)"
           alt="" />
@@ -35,7 +42,9 @@
         v-if="toursList.length > 0 && fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse)">
       </div>
 
-      <li class="daolan" @click.stop="playTour" v-if="toursList.length > 0">
+      <li
+      v-tooltip="'导览'"
+       class="daolan" @click.stop="playTour" v-if="toursList.length > 0">
         <img :src="require(`@/assets/images/icon/${isPlayTours ? 'pause01' : 'playing01'}@2x.png`)" alt="" />
         <span>导览</span>
         <img @click.stop="openTours" :class="{ active: showTours }" class="jiantou"

+ 40 - 19
packages/qjkankan-view/src/components/UIGather/mobile/control.fdkk.vue

@@ -1,5 +1,11 @@
 <template>
-  <ul class="control-fdkk">
+  <ul class="control-fdkk" v-if="(fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))
+  || (customLink && customLink.isShow)
+  || (customTelephone && customTelephone.isShow)
+  || (metadata.description)
+  || (metadata.description)
+  || (metadata.backgroundMusic && metadata.backgroundMusic.id && (fdkkCurrentVersion != 'v3' &&  (fdkkmetadata && !fdkkmetadata.controls.showMap)))">
+
 
     <li class="daolan" :class="{ v3daolan: fdkkCurrentVersion == 'v3' }" @click.stop="playTour"
       v-if="toursList.length > 0">
@@ -9,13 +15,14 @@
       <span>导览</span>
       <img @click.stop="openTours" :class="{ active: showTours }" class="jiantou"
         :src="require(`@/assets/images/icon/expand_arrows@2x.png`)" alt="" />
-      <div class="vlink" ></div>
+      <div class="vlink"></div>
     </li>
 
-    <template v-if="fdkkCurrentVersion != 'v3'">
+    <template v-if="fdkkCurrentVersion != 'v3' &&  (fdkkmetadata && !fdkkmetadata.controls.showMap)">
       <li v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
         @click="onModeChange('panorama')">
-        <img :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected@2x' : 'roaming_normal@2x'}.png`)"
+        <img
+          :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected@2x' : 'roaming_normal@2x'}.png`)"
           alt="" />
       </li>
 
@@ -27,11 +34,17 @@
 
       <li v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse" :class="{ disabled: isPlayTours || flying }"
         @click="onModeChange('dollhouse')">
-        <img :src="require(`@/assets/images/icon/${mode == 'dollhouse' ? '3d_selected@2x' : '3d_normal@2x'}.png`)" alt="" />
+        <img :src="require(`@/assets/images/icon/${mode == 'dollhouse' ? '3d_selected@2x' : '3d_normal@2x'}.png`)"
+          alt="" />
       </li>
 
       <li class="vlink"
-        v-if="fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse)">
+        v-if="
+        (customLink && customLink.isShow)||
+        (customTelephone && customTelephone.isShow)||
+        (metadata.description)||
+        (metadata.backgroundMusic && metadata.backgroundMusic.id && (fdkkCurrentVersion != 'v3')) &&
+        (fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))">
       </li>
 
     </template>
@@ -57,7 +70,7 @@
 
 
     <!-- 背景音乐 -->
-    <li @click="onIsBGM" v-if="metadata.backgroundMusic && metadata.backgroundMusic.id">
+    <li @click="onIsBGM" v-if="(metadata.backgroundMusic && metadata.backgroundMusic.id && (fdkkCurrentVersion != 'v3')) || fdkkBGM">
       <img :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)"
         alt="" />
     </li>
@@ -84,7 +97,8 @@ import { useMusicPlayer } from '@/utils/sound'
 //背景音乐
 const musicPlayer = useMusicPlayer()
 
-const showMusicPlaying = ref(false)
+
+const showMusicPlaying = ref(musicPlayer.isPlay)
 
 const store = useStore();
 const toursList = computed(() => store.getters["fdkk/toursList"]);
@@ -109,6 +123,7 @@ const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);
 
 const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
+const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);
 
 
 
@@ -179,13 +194,16 @@ const onModeChange = name => {
 
 
 onMounted(() => {
+  nextTick(() => {
+    musicPlayer.on('play', () => {
+      showMusicPlaying.value = true
+    })
+    musicPlayer.on('pause', () => (showMusicPlaying.value = false))
+  })
 })
 
 
-musicPlayer.on('play', () => {
-  showMusicPlaying.value = true
-})
-musicPlayer.on('pause', () => (showMusicPlaying.value = false))
+
 
 </script>
 
@@ -213,10 +231,11 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
       height: 100%;
     }
 
-     
-    &:last-of-type{
+
+    &:last-of-type {
       margin-right: 10px;
-      &::after{
+
+      &::after {
         width: 10px;
         height: 1px;
         background: none;
@@ -224,7 +243,8 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
         display: inline-block;
       }
     }
-    &:first-of-type{
+
+    &:first-of-type {
       margin-left: 10px;
     }
   }
@@ -267,9 +287,10 @@ musicPlayer.on('pause', () => (showMusicPlaying.value = false))
     >span {
       margin-left: 0;
     }
-  .vlink {
-    margin-left: 10px;
-  }
+
+    .vlink {
+      margin-left: 10px;
+    }
   }
 
   .vlink {

+ 5 - 3
packages/qjkankan-view/src/components/UIGather/mobile/control.pano.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="control-pano">
+  <ul class="control-pano" >
 
     <!-- 自定义链接 -->
     <li @click="onLink" v-if="customLink && customLink.isShow">
@@ -67,8 +67,9 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
-const showMusicPlaying = ref(false)
-const showCommentaryPlaying = ref(false)
+const showMusicPlaying = ref(musicPlayer.isPlay)
+
+const showCommentaryPlaying = ref(soundPlayer.isPlay)
 
 // const isCommentary = computed(() => store.getters["functions/isCommentary"]);
 
@@ -170,6 +171,7 @@ soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
   display: flex;
   align-items: center;
   height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
   >li {
     width: 32px;
     height: 32px;

+ 0 - 1
packages/qjkankan-view/src/components/UIGather/mobile/control.vue

@@ -58,7 +58,6 @@ watchEffect(() => {
   height: 36px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(1px);
   max-width: calc(90vw - 100px);
   overflow-x: auto;

+ 5 - 1
packages/qjkankan-view/src/components/UIGather/mobile/index.vue

@@ -2,7 +2,7 @@
       <Logo />
       <Tips />
       <!-- <Menu /> -->
-      <div v-show="showUI">
+      <div v-show="showUI && !vrStatus">
             <sceneList />
             <div class="btn-style">
                   <div class="menu-icon">
@@ -43,6 +43,7 @@ const metadata = computed(() => store.getters["scene/metadata"]);
 const scenes = computed(() => store.getters["scene/list"]);
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 const currentScene = computed(() => store.getters["scene/currentScene"]);
+const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
 const onIsShowList = (data) => {
       if (showTours.value) {
@@ -69,6 +70,9 @@ useApp().then((app) => {
       app.Scene.on("sceneReady", () => {
             showUI.value = true
       })
+      app.Scene.on("onExitVr", () => {
+            store.commit("functions/setVrStatus", false);
+      })
 })
 
 </script>

+ 3 - 0
packages/qjkankan-view/src/pages/show.js

@@ -6,6 +6,8 @@ import Show from "./show.vue";
 import { createApp } from "vue";
 import Checkbrowser from '@/components/assembly/Checkbrowser.vue'
 import ClickOutSide from "../utils/fns/ClickOutSide";
+import ToolTip from "../utils/fns/ToolTip";
+
 import browser from "../utils/browser";
 import Deferred from "@/utils/Deferred";
 import store from '../store'
@@ -49,5 +51,6 @@ loadLocaleMessages(i18n, local).then(() => {
   app.use(store);
   app.use(Components);
   app.directive("click-outside", ClickOutSide);
+  app.directive("tooltip", ToolTip);
   app.mount("#app");
 });

+ 1 - 2
packages/qjkankan-view/src/pages/showMobile.vue

@@ -6,7 +6,7 @@
     <div class="ui-view-layout" :class="{ show: show }">
       <Pano />
       <Tags />
-      <UiGather  v-show="!vrStatus"/>
+      <UiGather/>
       <TitieSlide/>
     </div>
   </template>
@@ -48,7 +48,6 @@ const workEnable = ref(true);
 
 const currentScene = computed(() => store.getters["scene/currentScene"]);
 const currentCatalogRoot = computed(() => store.getters["scene/currentCatalogRoot"]);
-const vrStatus = computed(() => store.getters["functions/vrStatus"]);
 
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 

+ 5 - 0
packages/qjkankan-view/src/sdk/QJKanKan/modules/Scene.js

@@ -46,10 +46,15 @@ export default class Scene extends Emiter {
       this.emit("onNewPano");
     };
 
+    window.onExitVrStatus = () => {
+      this.emit("onExitVr");
+    };
+
     let settings = {
       "events[skin_events].onloadcomplete": "js(window.onPanoReady());",
       "events[skin_events].onviewchanged": "js(window.onPanoViewChanged());",
       "events[skin_events].onnewpano": "js(window.onNewPano());",
+      "plugin[WebVR].onexitvr": "js(window.onExitVrStatus());",
     };
     if (this.locked) {
       await this.locked;

+ 0 - 12
packages/qjkankan-view/src/utils/fns/DomResize.js

@@ -1,12 +0,0 @@
-const DomResize = {
-    beforeMount(el, binding) {
-        
-    },
-    updated(el, binding) {
-    
-    },
-    unmounted() {
-    },
-}
-
-export default DomResize

+ 127 - 0
packages/qjkankan-view/src/utils/fns/ToolTip.js

@@ -0,0 +1,127 @@
+import {computePosition, offset, flip, shift, arrow} from '@floating-ui/dom';
+
+
+const Tooltip = (el, binding, vNode, preVnode) => {
+    if (!binding.value) {
+        return
+    }
+    let tooltipNode = null
+    el.addEventListener('mouseenter', function (e) {
+        tooltipNode = document.createElement('div')
+        tooltipNode.style.position = 'fixed'
+        tooltipNode.style.zIndex = 100
+        tooltipNode.style.backgroundColor = 'rgba(0,0,0,1)'
+        tooltipNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
+        tooltipNode.style.borderRadius = '3px'
+        tooltipNode.style.border = '1px solid rgba(151, 151, 151, 0.2)'
+        tooltipNode.style.boxShadow = '0px 2px 12px 0px rgba(0, 0, 0, 0.06)'
+        tooltipNode.style.padding = '8px 8px'
+        tooltipNode.style.fontSize = '12px'
+        tooltipNode.style.cursor = 'default'
+        tooltipNode.style.pointerEvents = 'none'
+        tooltipNode.style.wordBreak = 'keep-all'
+        tooltipNode.style.whiteSpace = 'pre'
+        tooltipNode.style.fontSize = '12px'
+        tooltipNode.style.lineHeight = '17px'
+        tooltipNode.style.color = '#ffffff'
+        tooltipNode.innerText = binding.value
+
+        const arrowNode = document.createElement('div')
+        arrowNode.style.position = 'absolute'
+        arrowNode.style.backgroundColor = 'inherit'
+        arrowNode.style.boxSizing = 'border-box'
+        arrowNode.style.width = '12px'
+        arrowNode.style.height = '12px'
+        arrowNode.style.border = '1px solid transparent'
+        arrowNode.style.borderRight = 'inherit'
+        arrowNode.style.borderBottom = 'inherit'
+        arrowNode.style.transform = 'rotate(45deg)'
+
+        tooltipNode.appendChild(arrowNode)
+        document.body.appendChild(tooltipNode)
+
+        computePosition(el, tooltipNode, {
+            placement: 'top',
+            middleware: [
+                offset(13),
+                flip(),
+                shift({ padding: 12 }),
+                arrow({
+                    element: arrowNode,
+                    padding: 3,
+                }),
+            ],
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(tooltipNode.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const staticSide = {
+                top: 'bottom',
+                right: 'left',
+                bottom: 'top',
+                left: 'right',
+            }[placement.split('-')[0]];
+
+            Object.assign(arrowNode.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                [staticSide]: '-6px',
+            });
+        });
+    }, {
+        passive: false,
+    })
+    el.addEventListener('mouseleave', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('mousedown', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('keydown', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('scroll', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('dragstart', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('dragstart', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+    el.addEventListener('dragleave', function () {
+        try {
+            document.body.removeChild(tooltipNode)
+        } catch (e) {
+            console.log('尝试从DOM上移除tooltip元素失败,通常是因为已经在其他回调中被移除了,不需处理:', e);
+        }
+    })
+}
+
+export default Tooltip

+ 1 - 1
packages/qjkankan-view/src/utils/sound.js

@@ -67,7 +67,7 @@ class AudioPlayer extends QJKanKan.MITT.Emiter {
                             this.isPlay = false
                             this.emit('pause')
                         },
-                        onstop: () => {
+                        onend: () => {
                             this.isPause = false
                             this.isPlay = false
                             this.emit('pause')