update

web/public/static/css/main.css

@@ -3877,7 +3877,6 @@ a.hasHover:hover, a:active {
 #play, #pause {
     position: relative;
     width: 94px;
-    height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;

web/public/static/js/main_2020_show.js

@@ -71,8 +71,11 @@ var initMenu = function(){
     var renderer2 = new THREE.CSS3DRenderer();
     renderer2.setSize( window.innerWidth, window.innerHeight );
     renderer2.domElement.id =  'menudiv' 
+    renderer2.domElement.html = 'tsts'
     $("#gui-parent")[0].appendChild(renderer2.domElement)
     menuDiv.renderer2 = renderer2
+
+    
     
     var scene2 = new THREE.Scene();
     menuDiv.objects.forEach(info=>{
@@ -14821,6 +14824,7 @@ window.Modernizr = function(n, e, t) {
 							var e = N.calcFullLoadingTime();
 							de.warn("Total load time: " + e / 1e3),
 							H.loadComplete(e),
+                            window.dispatchEvent(window.evt);
 							de.warn("First render after model load finished.")
 						}),
 						S.on(le.MemoryUsageUpdated, n)
@@ -16021,87 +16025,13 @@ window.Modernizr = function(n, e, t) {
         }
 		hot.prototype.examine = function(e, options) { 
             options = options || {}
-            if(this.linkType!="common" && this.infoAttribute.iframe && this.infoAttribute.iframe[0] && !options.dontOpen){
-                var src = getLink(this.infoAttribute.iframe[0]);
-                if(this.linkType=="jumpLink"){
-                    /* var newPage = window.open(src, "_blank" ); 
-                    newPage.focus(); */
-                    
-                    var href = window.location.href
-                    var index =  href.indexOf("&")
-                    if(index>-1) href = href.substr(0,index)   /* pushState replaceState*/
-                    history.pushState(null, "", href+'&qs=1&firstView=pano:'+player.currentPano.id+',qua:'+ player.quaternion.toArray());
-                    window.location.href = src
-                    
-                    
-                }else if(this.linkType=="iframeDiv"){
-                    var div = document.createElement("div");
-                    $("body").append(div);
-                    div.style.position = 'fixed';
-                    div.style.width = div.style.height = "100%";
-                    div.style.left = div.style.top = '0';
-                    div.style["z-index"] = "999"
-                    
-                    var exit = document.createElement("div");
-                    exit.style["background-image"] = "url(images/vrOffImg.png)";
-                    exit.style.position = 'absolute';
-                    exit.style.width = exit.style.height = "50px";
-                    exit.style.left = '17px';   exit.style.top = "20px"
-                    exit.style.cursor = "pointer";
-                    exit.style["background-repeat"] = "no-repeat";
-                    exit.style["background-size"] = "25%"; 
-                    exit.style["background-position"] = "center center"; 
-                    exit.style["background-color"] = "rgba(0, 0, 0, 0.2)"; 
-                    exit.style["border-radius"] = "50%";
-                    exit.style["z-index"] = "3"
-                    exit.onclick = ()=>{
-                        $(div).remove()
-                        if(g_bgAudio && g_bgAudio.pauseByHot){
-                            manage.switchBgmState(true)
-                        }
-                    }  
-                    
-                    var myElement = document.createElement("iframe");
-                    myElement.style.position = 'absolute';
-                    myElement.style.width = myElement.style.height = "100%";
-                    myElement.style.left = myElement.style.top = '0';
-                     
-                    myElement.src = src
-                    
-                    
-                    
-                    
-                    div.appendChild(exit);
-                    div.appendChild(myElement)
-                    
-                    
-                    //打开热点的时候把背景音乐关闭了，避免与热点里面的音乐冲突
-                    //g_bgAudio && g_bgAudio.pause();
-                    if(g_bgAudio && !g_bgAudio.paused){
-                        manage.switchBgmState(false); 
-                        g_bgAudio.pauseByHot = true
-                    } 
-                    if(g_tourAudio)g_tourAudio.pause()
-                    
-                    
-                    
-                }
-                
-                
-                
-                
-                return;
-            }
-        
         
             if(!player.currentPano)return;
 			var hotPop = document.getElementById('popup');
             //获取那个热点的链接 
 			if(this.link){
 				g_currentHot = this;		
-				hotPop.style.display = "block";
-				hotPop.classList.add("wait");
-				var myElement = document.createElement("iframe");
+                
                 //打开热点的时候把背景音乐关闭了，避免与热点里面的音乐冲突
                 //g_bgAudio && g_bgAudio.pause();
                 if(g_bgAudio && !g_bgAudio.paused){
@@ -16109,42 +16039,9 @@ window.Modernizr = function(n, e, t) {
                     g_bgAudio.pauseByHot = true
                 } 
                 if(g_tourAudio)g_tourAudio.pause()
-                
-                var src = getLink(this.link   )
-                myElement.src = src; 
-                myElement.id = "id1";
-				myElement.allowTransparency = "true";
-				// myElement.scrolling = "no";
-				var element=document.getElementById("id1");  //判断页面是否有iframe 
-				if (typeof(element)== "undefined" || element == null){
-                    document.querySelector(".popup-content").appendChild(myElement);
-                    //移动端自动播放
-                    var videoLoaddingResult = false
-                    window.loaddingSuccess = function() {
-                        videoLoaddingResult = true
-                    }
 
-                    setTimeout(function func() {
-                        if (videoLoaddingResult) {
-                            var $iframe = document.querySelector('#id1').contentWindow.document;
-                            if($iframe.querySelector('video')){
-                                $iframe.querySelector('video').play();
-                                // alert($iframe.querySelector('video'));
-                                if(!$iframe.querySelector('video').paused && $iframe.querySelector('.playPause')){
-                                    $iframe.querySelector('.playPause').classList.add("fa-pause");
-                                }
-                            }
-                            if($iframe.querySelector('audio')){
-                                $iframe.querySelector('audio').play();
-                            }
-                        } else {
-                            setTimeout(func, 300)
-                        }
-                    }, 800);
-				}  
-				
-				//setTimeout(function(){$('#player').on("click",e.closePopup);},20)
-				
+
+              
 			}
 			
             // if(hotListSta) {
@@ -16159,9 +16056,8 @@ window.Modernizr = function(n, e, t) {
 			var o = function() {
 				e.flyingToTag = false;
 				if(this.link){ 
-					hotPop.classList.remove("wait"); 
+                    window.player.emit('openHotspot', this.sid)
 				}
-				
 			}.bind(this);
             
             

web/public/static/js/manage.js

@@ -3,7 +3,7 @@ var Manage = function(){
     this.weixinURL = "https://res.wx.qq.com/open/js/jweixin-1.2.0.js",
     this.time = "?"+new Date().getTime();
     this.loadAudio();
-    this.loadWeixin();
+    // this.loadWeixin();
 }
 //动态加载js文件
 Manage.prototype.LoadJs = function(_files, succes){

web/src/components/hotspot/image.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/hotspot_bg.jpg')})`}">
+    <div class="title">{{hotspot.title}}</div>
+    <div class="img-con">
+      <span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
+      <img :src="hotspot.images[active]" alt="">
+      <span @click="active+=1" :class="{noshow:active>=hotspot.images.length - 1}">下一张</span>
+      <ul class="pagna">
+        <li v-for="(item,i) in hotspot.images" :class="{active:i==active}" :key="i"></li>
+      </ul>
+    </div>
+
+    <div class="desc" v-html="hotspot.content">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['hotspot'],
+  data(){
+    return {
+      active:0
+    }
+  },
+  methods:{
+    control(type){
+      if (type=='next') {
+        
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.noshow{
+  opacity: 0!important;;
+  pointer-events: none!important;;
+}
+
+.images{
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  text-align: center;
+  .title{
+    padding: 0 80px;
+    display: inline-block;
+    color: #DBA761;
+    font-weight: bold;
+    font-size: 36px;
+    height: 70px;
+    line-height: 70px;
+    background: #BC1515;
+    border-radius: 60px;
+    margin: 45px auto;
+  }
+  .img-con{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    padding-bottom: 40px;
+    >span{
+      display: inline-block;
+      padding: 0 30px;
+      box-sizing: content-box;
+      font-size: 20px;
+      height: 50px;
+      line-height: 50px;
+      background: rgba(188, 21, 21, 0.9);
+      border: 2px solid #DBA761;
+      border-radius: 37px;
+      cursor: pointer;
+      &:hover,&.active{
+        color: #DBA761;
+      }
+    }
+    >img{
+      max-width: 1000px;
+      border: 10px solid #BC1515;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      max-height: 600px;
+    }
+    .pagna{
+      position: absolute;
+      bottom: 0;
+      text-align: center;
+      z-index: 999;
+      >li{
+        width: 60px;
+        height: 6px;
+        background: #BC1515;
+        display: inline-block;
+        margin: 0 4px;
+        &.active{
+          background: #DBA761;
+        }
+      }
+    }
+  }
+  .desc{
+    max-width: 1000px;
+    margin: 20px auto 0;
+    color: #DBA761;
+    text-align: left;
+    line-height: 2;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+}
+</style>

web/src/components/hotspot/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import UIHotspot from './index.vue'
+
+
+const Hotspot = Vue.extend(UIHotspot)
+
+
+let hotspotInstance = ''
+export function $showHotspot(data={}) {
+    if (hotspotInstance) {
+        return
+    }
+    hotspotInstance = new Hotspot({
+        data
+    }).$mount()
+
+    document.body.appendChild(hotspotInstance.$el)
+
+    Vue.nextTick(() => {
+        hotspotInstance.show = true
+    })
+}
+
+export function $hideHotspot() {
+    if (hotspotInstance) {
+        document.body.removeChild(hotspotInstance.$el)
+        hotspotInstance = ''
+    }
+}
+
+

web/src/components/hotspot/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="hotspotcon">
+    <img @click="close" class="close" :src="require('@/assets/images/project/close.png')" alt="">
+    <component :is="active" :hotspot="hotspot"></component>
+  </div>
+</template>
+
+<script>
+import audio from './audio.vue';
+import image from './image.vue';
+import video from './video.vue';
+
+let iconArr = [
+  { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
+  { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
+  { name: "图片", key: "images", id: "vImage", img: "img-icon", display: false },
+  { name: "模型", key: "model",  id: "vModel", img: "model-icon", display: false },
+];
+
+export default {
+  components:{
+    vAudio:audio,
+    vImage:image,
+    vVideo:video
+  },
+  methods:{
+    close(){
+      this.$hideHotspot()
+    }
+  },
+  mounted(){
+    iconArr.forEach(item => {
+      if (this.hotspot[item.key]) {
+          this.active = !this.active ? item.id : this.active;
+        }
+    });
+    console.log(this.active);
+  },
+  data(){
+    return {
+      active:''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspotcon{
+  background: #000;
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  .close{
+    position: fixed;
+    top: 40px;
+    right: 40px;
+    width: 70px;
+    height: 70px;
+    cursor: pointer;
+  }
+}
+</style>

web/src/mixins/index.js

@@ -7,6 +7,8 @@ import browser from '@/utils/browser'
 //   $hideBroadcast,
 // } from '@/components/popupLayout'
 
+import {$showHotspot,$hideHotspot } from '@/components/hotspot/index.js'
+
 Vue.prototype.$bus = new Vue()
 
 
@@ -17,6 +19,8 @@ Vue.mixin({
         }
     },
     methods: {
+      $showHotspot,
+      $hideHotspot
       // $showLoading,
       // $showBroadcast,
       // $hideBroadcast

web/src/pages/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="parent-body">
     <!-- 热点 -->
-    <hot/>
+    <!-- <hot/> -->
     <!-- 热点弹出框 -->
     <popup/>
     <!-- 加载初始页面 -->
@@ -63,7 +63,6 @@
 </template>
 
 <script>
-import hot from '@/views/hot';
 import popup from '@/views/popup';
 import guiLoading from '@/views/gui/loading';
 import hotspotList from '@/views/gui/hotspotlist';
@@ -81,7 +80,6 @@ import welcome from '@/components/welcome';
 export default {
   name: 'Home',
   components: {
-      hot,
       popup,
       guiLoading,
       hotspotList,
@@ -98,8 +96,40 @@ export default {
  
   data(){
       return {
-          showWelcome: false
+          showWelcome: false,
+          hotspots:''
       }
+  },
+
+  methods:{
+        getHotSpotList(){
+          $.ajax({
+                url: g_Prefix+"data/" + window.number + "/hot/js/data.js" +'?'+ Math.random(),
+                type: "get",
+                dataType: "json",
+                contentType: "application/json",
+                success: (result) => {
+                    this.hotspots = result
+                }
+            });
+          
+      }
+  },
+
+  mounted(){
+    this.$nextTick(() => {
+        window.evt =  document.createEvent('HTMLEvents')
+        window.evt.initEvent('loadfinish',false,false)
+        window.addEventListener('loadfinish',  ()=> {
+            this.getHotSpotList()
+            window.player.on("openHotspot", (data)=> {
+                console.log(this.hotspots[data],'==========');
+                this.$showHotspot({
+                    hotspot:this.hotspots[data]
+                })
+            })
+        })
+      })
   }
 }
 </script>

web/src/views/gui/menu.vue

@@ -271,9 +271,17 @@ export default {
 
 <style lang="less" scoped>
 @wh:90px;
+@margin:10px;
+#play, #pause{
+  margin-right: @margin;
+  img{
+    width: @wh;
+    height: @wh;
+  }
+}
 #gui-modes-map {
   > div {
-    margin-right: 10px;
+    margin-right: @margin;
     > img {
       width: @wh;
       height: @wh;