update111

package.json

@@ -8,14 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@panzoom/panzoom": "^4.4.1",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "qs": "^6.10.1",
+    "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
-    "vue-infinite-scroll": "^2.0.2",
-    "swiper": "^5.3.8",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

public/static/js/main_2020_show.js

@@ -7112,6 +7112,7 @@ window.Modernizr = function(n, e, t) {
                   , I = p.children();
                 t.on("update.controls", function() {
                     var n = t.describe();
+                    window.player.emit('onplayStatus', n),
                     n.tourIsPlaying || i.isWarping() ? (je.tourControls.visible && (l.hide(),
                     c.show()),
                     n.tourInProgress && (h.forEach(function(e) {

public/static/js/myShow.js

@@ -61,8 +61,9 @@ var g_weixinObj = {
 
 var settings = {
     overlay:{
-		width:1, height:0.5, depth:0.02
-	}  
+      width:1, height:0.5, depth:0.02
+    },
+    dontExamHot:true  
 }
 if(window.number == '725'||window.number == '724'){
     settings.mobileNavHigh = true

src/assets/style/public.less

@@ -105,6 +105,7 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
     background-repeat: no-repeat;
     background-position: center;
     background-color:rgba(0,0,0,0.7);
+    font-size: 0;
   }
 }
 
@@ -141,7 +142,8 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
       overflow: hidden;
       background-repeat: no-repeat;
       background-position: center;
-      background-color: rgba(0,0,0,0.7)
+      background-color: rgba(0,0,0,0.7);
+      font-size: 0;
     }
   }
   

src/components/hotspot/image.vue

@@ -25,7 +25,7 @@
             @click="handlePage('prev')"
           />
           <div class="imgmain" :class="{bigImg: !hotspot.content}">
-            <img v-viewer :src="hotspot.images[active]" alt="" />
+            <img id="map" :src="hotspot.images[active]" alt="" />
           </div>
           <img
             class="aa"
@@ -91,6 +91,7 @@
 import { directive } from "vue-awesome-swiper";
 // import style (<= Swiper 5.x)
 import "swiper/css/swiper.css";
+import Panzoom from '@panzoom/panzoom'
 
 export default {
   directives: {
@@ -99,6 +100,7 @@ export default {
   props: ["hotspot", "type"],
   data() {
     return {
+      panzoom:'',
       active: 0,
       mbactive: 0,
     };
@@ -141,6 +143,15 @@ export default {
       };
     },
   },
+  mounted(){
+    const elem = document.getElementById('map')
+    this.panzoom = Panzoom(elem, {
+      maxScale: 10
+    })
+    this.panzoom.pan(10, 10)
+    this.panzoom.zoom(1, { animate: true })
+    elem.addEventListener('wheel', this.panzoom.zoomWithWheel)
+  }
 };
 </script>
 

src/components/mapsvg/e.vue

@@ -168,7 +168,7 @@
         />
       </g>
     </g>
-    <g id="point">
+    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
       <g id="e-s25">
         <circle class="st9" cx="21.2" cy="34" r="7.1" />
         <circle class="st9" cx="21.2" cy="34" r="5.1" />
@@ -315,7 +315,7 @@
 
 <script>
 export default {
-  props: ["data", "currentPanoid"],
+  props: ["data", "currentPanoid","cls"],
   data() {
     let keysData = Object.keys(this.data);
     return {
@@ -323,6 +323,12 @@ export default {
     };
   },
   methods: {
+    hoverItem(e){
+      let target = e.target.parentElement;
+      console.dir(target);
+      let tt = this.data[target.id];
+      this.$emit('hoverPano',tt||{})
+    },
     handleClick(e) {
       let target = e.target.parentElement;
       let tt = this.data[target.id];
@@ -416,9 +422,25 @@ svg {
 #point {
   > g {
     cursor: pointer;
-    &:hover {
+    &.active {
       ellipse,
-      circle {
+      circle:last-of-type {
+        fill: @color;
+        opacity: 1!important;
+      }
+      circle:first-of-type {
+        opacity: 1!important;
+      }
+    }
+    
+    &:hover{
+      ellipse,
+      circle:last-of-type {
+        fill: #fff;
+        opacity: 1!important;
+      }
+      circle:first-of-type {
+        opacity: 1!important;
         fill: @color;
       }
     }

src/components/mapsvg/show.vue

@@ -40,7 +40,7 @@
     left: 0;
     top: 0;
     z-index: -1;
-    clip-path: polygon(0.5% 2%, 99.8% 2%, 99.8% 98%, 0.5% 98%);
+    clip-path: polygon(0.5% 2%, 99.8% 2%, 99.8% 97%, 0.5% 97%);
   }
 
   .vsvgmapcon {

src/components/mapsvg/xuting.vue

@@ -102,7 +102,7 @@
         />
       </g>
     </g>
-    <g id="point" :class="cls" @click="handleClick">
+    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
       <g :class="'xt-s1' + cls" id="xt-s1">
         <circle class="st7" cx="230.4" cy="48" r="7.7" />
         <circle class="st7" cx="230.4" cy="48" r="5.5" />
@@ -187,6 +187,12 @@ export default {
     };
   },
   methods: {
+    hoverItem(e){
+      let target = e.target.parentElement;
+      console.dir(target);
+      let tt = this.data[target.id];
+      this.$emit('hoverPano',tt||{})
+    },
     handleClick(e) {
       let target = e.target.parentElement;
       let tt = this.data[target.id];
@@ -278,10 +284,25 @@ export default {
 #point {
   > g {
     cursor: pointer;
-    &:hover,
     &.active {
       ellipse,
-      circle {
+      circle:last-of-type {
+        fill: @color;
+        opacity: 1!important;
+      }
+      circle:first-of-type {
+        opacity: 1!important;
+      }
+    }
+    
+    &:hover{
+      ellipse,
+      circle:last-of-type {
+        fill: #fff;
+        opacity: 1!important;
+      }
+      circle:first-of-type {
+        opacity: 1!important;
         fill: @color;
       }
     }

src/pages/mobilescene/components/qrcode.vue

@@ -9,12 +9,29 @@
         <span>邀请好友一起观展吧！</span>
         <span>请长按下方图片下载二维码分享给好友</span>
       </div>
-      <ul>
-        <li v-for="(item,i) in qrcodeArr" :key="i">
-          <p v-html="item.name"></p>
-          <img :src="require(`@/assets/images/project/${item.qrcode}`)" alt="">
-        </li>
-      </ul>
+      <div class="ul">
+        <div class="li">
+          <p v-if="!currentPano.name" v-html="currentPano.name"></p>
+          <div class="xiala" v-else>
+            <span @click="isShowUl=!isShowUl">
+              {{currentPano.name}}
+              <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
+            </span>
+            <ul class="brightness" v-if="isShowUl">
+              <li @click="isShowUl=false,currentPano.name='四川省返乡创业'" v-for="(item,i) in 2" :key="i">
+                四川省返乡创业
+              </li>
+            </ul>
+          </div>
+
+          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
+        </div>
+
+        <div class="li">
+          <p v-html="currentItem.name"></p>
+          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -25,13 +42,7 @@ export default {
   props:['currentPano','currentItem'],
   data(){
     return {
-      qrcodeArr:[{
-        name:this.currentPano.name,
-        qrcode:'qrcode.jpg'
-      },{
-        name:this.currentItem.name,
-        qrcode:'qrcode.jpg'
-      }]
+      isShowUl:false
     }
   }
 }
@@ -81,22 +92,68 @@ export default {
           }
         }
       }
-    >ul{
+    >.ul{
       width: 100%;
       height: calc(100% - 100px);
       overflow-y: auto;
-      padding-top: 10px;
-      >li{
+      padding: 10px;
+      >.li{
         text-align: center;
         width: 100%;
         margin-top: 10px;
-        >p{
+        >p,.xiala{
           font-size: 14px;
           line-height: 1.5;
           display: flex;
           align-items: center;
           justify-content: center;
         }
+        .xiala{
+          width: 50%;
+          margin: 0 auto 10px;
+          position: relative;
+          >span{
+            border: 1px solid #fff;
+            display: inline-block;
+            border-radius: 4px;
+            width: 100%;
+            padding: 10px 30px 10px 10px;
+            position: relative;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            >img{
+              position: absolute;
+              right: 12px;
+              transform: rotate(90deg);
+              top: 33%;
+              width: 8px;
+            }
+          }
+          >ul{
+            position: absolute;
+            top: 110%;
+            padding: 0 10px;
+            width: 100%;
+            z-index: 99;
+            clip-path:none!important;
+            border-radius: 4px;
+            overflow: hidden;
+            height: auto;
+            >li{
+              text-align: left;
+              line-height: 1.5;
+              border-bottom: dashed 1px #fff;
+              padding: 10px 0;
+              cursor: pointer;
+              font-size: 16px;
+              &:last-of-type{
+                border-bottom: none;
+              }
+            }
+          }
+        }
         >img{
           max-width: 150px;
           width: 50%;

src/pages/mobilescene/map.vue

@@ -7,7 +7,6 @@
     <div class="cadmap brightness" @click="openMap">
       <component :cls="cp" @currentPano="data=>{this.$emit('currentPano',data)}" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
     </div>
- 
   </div>
 </template>
 

src/pages/mobilescene/menu.vue

@@ -123,13 +123,13 @@ export default {
         supCount(() => {});
       });
     },
-    toggle() {
-      let fn = this.tourStatus ? "stopTour" : "startAndPlay";
+    toggle(){
+      let fn = this.tourStatus?'stopTour':'startAndPlay'
       this.$bus.$emit('ifrMessage',{
         events:'toggleTour',
         data:fn
       })
-    },
+    }
   },
   mounted() {},
 };

src/pages/mobilescene/scene.vue

@@ -2,7 +2,7 @@
   <div class="scene-body">
     <iframe
       ref="ifr"
-      src="scene.html?m=1079"
+      :src="`scene.html?m=1079${firstView[viewId]}`"
       allowfullscreen="true"
       frameborder="0"
     ></iframe>
@@ -12,6 +12,33 @@
 <script>
 export default {
   props: ["tourStatus"],
+  data(){
+    return {
+      firstView: {
+        xuting:
+          "&firstView=pano:0,qua:-0.001489144851378805,0.8167267402741333,0.002107772549575186,0.5770188587943806",
+        e:
+          "&firstView=pano:30,qua:0.028523630856794317, 0.953183703881663, -0.09519870492067249, 0.2855948602103702",
+      },
+      viewId:this.$route.params.type
+    }
+  },
+  mounted() {
+    let ifrWindow = this.$refs.ifr.contentWindow
+    this.$bus.$on('ifrMessage',(data)=>{
+      if (data.events=='flyToPano') {
+          let { x, y, z, w } = data.data.quaternion
+          ifrWindow.player.flyToPano({
+            pano: ifrWindow.player.model.panos.index[data.data.id],
+            quaternion: new ifrWindow.THREE.Quaternion(x, y, z, w),
+          });
+      }
+
+      if (data.events=='toggleTour') {
+        ifrWindow[data.data]()
+      }
+    })
+  },
   watch: {
     theme(newVal) {
       if (newVal == "xuting") {
@@ -49,8 +76,8 @@ export default {
           "*"
         );
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

src/pages/scene/aside.vue

@@ -31,7 +31,8 @@
     <div class="mapccon"  v-show="showMap" @click="showMap=false">
       <showmap class="showmap"  @click.stop.native @close="showMap=false">
         <div slot="body" class="vmap">
-          <component :cls="cp+'_big'" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
+          <p>{{hoverName}}</p>
+          <component :cls="cp+'_big'" @hoverPano="handleHover" :currentPanoid="currentPanoid" :data="panodata[$route.params.type]" :is="cp"/>
         </div>
       </showmap>
     </div>
@@ -71,7 +72,8 @@ export default {
       isShow:true,
       panodata,
       showMap:false,
-      currentPano:{}
+      currentPano:{},
+      hoverName:''
     }
   },
   computed:{
@@ -88,6 +90,9 @@ export default {
     }
   },
   methods:{
+    handleHover(data){
+      this.hoverName = data.name
+    },
     openMap(){
       this.showMap = true
       this.isShow=false
@@ -217,6 +222,7 @@ export default {
     left: @conW;
     border-radius:0 6px 6px 0;
     overflow: hidden;
+    font-size: 0;
     .jiantou{
       position: absolute;
       top: 50%;
@@ -237,12 +243,17 @@ export default {
       left: 50%;
       transform: translate(-50%, -50%);
       .vmap{
+        >p{
+          height: 20px;
+          line-height: 20px;
+          font-size: 20px;
+          margin: 30px auto;
+        }
         & /deep/ svg{
-          width: 80%;
+          width: 64%;
         }
         & /deep/ #XT{
-          margin-top: 1%;
-          width: 66%;
+          width: 56%;
         }
       }
     }

src/pages/scene/components/qrcode.vue

@@ -1,61 +1,76 @@
 <template>
   <div class="qrcode">
-    <img class="qrcodebg" :src="require(`@/assets/images/project/kuangti/qrcode_${theme}.png`)" alt="">
+    <img
+      class="qrcodebg"
+      :src="require(`@/assets/images/project/kuangti/qrcode_${theme}.png`)"
+      alt=""
+    />
     <div class="brightness"></div>
 
     <div class="qrcodecon">
       <h3>扫描二维码，手机观展</h3>
-      <ul>
-        <li v-for="(item,i) in qrcodeArr" :key="i">
-          <p v-html="item.name"></p>
-          <img :src="require(`@/assets/images/project/${item.qrcode}`)" alt="">
-          <div>下载二维码</div>
-        </li>
-      </ul>
+      <div class="ul">
+        <div class="li">
+          <p v-if="!currentPano.name" v-html="currentPano.name"></p>
+          <div class="xiala" v-else>
+            <span @click="isShowUl=!isShowUl">
+              {{currentPano.name}}
+              <img :src="require(`@/assets/images/project/icon/jiantour.png`)" alt="">
+            </span>
+            <ul class="brightness" v-if="isShowUl">
+              <li @click="isShowUl=false,currentPano.name='四川省返乡创业'" v-for="(item,i) in 2" :key="i">
+                四川省返乡创业
+              </li>
+            </ul>
+          </div>
+
+          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
+          <div class="download">下载二维码</div>
+        </div>
+
+        <div class="li">
+          <p v-html="currentItem.name"></p>
+          <img :src="require(`@/assets/images/project/qrcode.jpg`)" alt="" />
+          <div class="download">下载二维码</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
-  props:['currentPano','currentItem'],
-  data(){
+  props: ["currentPano", "currentItem"],
+  data() {
     return {
-      qrcodeArr:[{
-        name:this.currentPano.name,
-        qrcode:'qrcode.jpg'
-      },{
-        name:this.currentItem.name,
-        qrcode:'qrcode.jpg'
-      }]
-    }
-  }
-}
+      isShowUl:false
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-@w:900px;
-@fixw:8px;
-.qrcode{
+@w: 900px;
+@fixw: 8px;
+.qrcode {
   width: @w;
   position: relative;
-  .qrcodebg{
+  .qrcodebg {
     width: @w + @fixw * 2;
     position: relative;
     transform: translateX(-@fixw);
   }
-  .brightness{
+  .brightness {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     z-index: -1;
-    clip-path: polygon(0 10%, 10% 2%, 100% 2%, 100% 90%, 90% 100%, 0 100%);
+    clip-path: polygon(0 11%, 10% 2%, 100% 2%, 100% 90%, 92% 98%, 0 98%);
   }
-  
-  .qrcodecon{
+
+  .qrcodecon {
     position: absolute;
     top: 0;
     transform: translateX(-50%);
@@ -64,7 +79,7 @@ export default {
     height: 100%;
     text-align: center;
     padding: 80px 0 0;
-    >h3{
+    > h3 {
       font-weight: normal;
       font-size: 26px;
       position: absolute;
@@ -72,18 +87,18 @@ export default {
       left: 8%;
       text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
     }
-    >ul{
+    .ul {
       display: flex;
       justify-content: center;
       width: 100%;
       padding-top: 18px;
-      >li{
+      .li {
         text-align: center;
         width: 220px;
-        &:first-of-type{
+        &:first-of-type {
           margin-right: 15%;
         }
-        >p{
+        > p, .xiala {
           font-size: 18px;
           line-height: 1.5;
           height: 80px;
@@ -91,11 +106,55 @@ export default {
           align-items: center;
           justify-content: center;
         }
-        >img{
+        .xiala{
+          position: relative;
+          >span{
+            border: 1px solid #fff;
+            display: inline-block;
+            border-radius: 4px;
+            width: 100%;
+            padding: 10px 30px 10px 10px;
+            position: relative;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
+            >img{
+              position: absolute;
+              right: 12px;
+              transform: rotate(90deg);
+              top: 33%;
+              width: 8px;
+            }
+          }
+          >ul{
+            position: absolute;
+            top: 90%;
+            padding: 0 10px;
+            width: 100%;
+            z-index: 99;
+            clip-path:none!important;
+            border-radius: 4px;
+            overflow: hidden;
+            height: auto;
+            >li{
+              text-align: left;
+              line-height: 1.5;
+              border-bottom: dashed 1px #fff;
+              padding: 10px 0;
+              cursor: pointer;
+              font-size: 16px;
+              &:last-of-type{
+                border-bottom: none;
+              }
+            }
+          }
+        }
+        > img {
           width: 100%;
           margin: 10px 0 40px;
         }
-        >div{
+        .download {
           border: 1px solid #fff;
           background-color: rgba(255, 255, 255, 0.29);
           line-height: 60px;
@@ -108,4 +167,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/pages/scene/index.vue

@@ -129,6 +129,7 @@ export default {
           }
 
           if (res.data.source === "onplayStatus") {
+            console.log(data.tourIsPlaying);
             this.tourStatus = data.tourIsPlaying;
           }
 

src/pages/scene/scene.vue

@@ -35,6 +35,7 @@ export default {
       }
 
       if (data.events=='toggleTour') {
+        console.log(ifrWindow[data.data]);
         ifrWindow[data.data]()
       }
     })

src/pages/scenePage/index.vue

@@ -126,6 +126,7 @@ export default {
         this.getHotSpotList();
         //监听导览状态
         window.player.on("onplayStatus", (data) => {
+          console.log(data);
           window.parent.postMessage(
             {
               source: "onplayStatus",

vue.config.js

@@ -12,6 +12,7 @@ module.exports = {
   pages: pages,
   publicPath: "./",
   lintOnSave: false,
+  productionSourceMap: process.env.NODE_ENV !== "production",
   css: {
     loaderOptions: {
       less: {