update221111

public/code/pano/data.json

@@ -1,7 +1,7 @@
 {
   "list": [{
     "title":"空军静展区",
-    "id":"1",
+    "id":"kj",
     "type":"4dkk",
     "scenes": [
       {
@@ -9,11 +9,11 @@
         "title": "空军静展区-1"
       },
       {
-        "id": "KJ-AckGiip025",
+        "id": "KJ-8zymnkgyrv",
         "title": "空军静展区-2"
       },
       {
-        "id": "KJ-8zymnkgyrv",
+        "id": "KJ-AckGiip025",
         "title": "空军静展区-3"
       },
       {
@@ -25,8 +25,8 @@
     "title":"商业示范飞行展区",
     "id":"WK1589958192614436864"
   },{
-    "title":"商用及公务机展区2",
-    "id":"WK1589927751274557440"
+    "title":"航天静展区",
+    "id":"WK1589927406813147136"
   },{
     "title":"军方飞行展区",
     "id":"WK1589958145407545344"
@@ -36,5 +36,11 @@
   },{
     "title":"航空工业静展区",
     "id":"WK1589927719381069824"
+  },{
+    "title":"商用及公务机展区",
+    "id":"WK1589927499599540224"
+  },{
+    "title":"商用及公务机展区2",
+    "id":"WK1589927751274557440"
   }]
 }

src/components/welcome/index.vue

@@ -42,7 +42,7 @@ export default {
     return {
       showJump: "",
       isVideo: false,
-      isKj: false,
+      // isKj: false,
     };
   },
   watch: {},
@@ -70,14 +70,14 @@ export default {
     },
   },
   mounted() {
-    this.$nextTick(() => {
-      this.isKj = this.getQueryVariable("type") == "kj";
-      if (this.isKj) {
-        setTimeout(() => {
-          this.select("pano");
-        }, 0);
-      }
-    });
+    // this.$nextTick(() => {
+    //   this.isKj = this.getQueryVariable("type") == "kj";
+    //   if (this.isKj) {
+    //     setTimeout(() => {
+    //       this.select("pano");
+    //     }, 0);
+    //   }
+    // });
   },
 };
 </script>

src/framework/show/fdkk.vue

@@ -1,33 +1,20 @@
 <template>
   <div class="ifrcon">
-    <iframe
-      allowfullscreen="true"
-      ref="iframe"
-      :key="selected.id"
-      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`"
-      frameborder="0"
-      @click="handleifrclk"
-      @load="onIframLoad"
-    ></iframe>
-    <mbui :type="type" :isShow="isShow" @close="isShow =false">
+    <iframe allowfullscreen="true" ref="iframe" :key="selected.id"
+      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0" @click="handleifrclk"
+      @load="onIframLoad"></iframe>
+    <mbui :type="type" :isShow="isShow" @close="isShow = false">
       <div class="img_ul" slot="imgList">
         <ul v-if="selectExh.scenes">
-          <li
-            v-for="(item, i) in selectExh.scenes"
-            @click="selected = item"
-            :key="i"
-            :class="{ active: selected.id == item.id }"
-          >
+          <li v-for="(item, i) in selectExh.scenes" @click="selected = item" :key="i"
+            :class="{ active: selected.id == item.id }">
             <div>
-              <img :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
+              <img
+                :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`"
+                v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
               <!-- <img :src="`https://airshow.4dkankan.com/images/images${item.id}/smallPic.jpg`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" /> -->
-              <rollName
-                :offset="20"
-                :active="selected.id == item.id"
-                class="pic-name"
-                :myref="'subw' + item.id"
-                :name="item.title"
-              />
+              <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
+                :name="item.title" />
             </div>
             <span class="bar"></span>
           </li>
@@ -36,12 +23,7 @@
 
       <div class="txt_ul" slot="txtList">
         <ul>
-          <li
-            v-for="(item, i) in list"
-            @click="selectExh = item"
-            :key="i"
-            :class="{ active: selectExh.id == item.id }"
-          >
+          <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
             <span>{{ selectExh.id == item.id ? item.title : item.short }}</span>
           </li>
         </ul>
@@ -50,7 +32,7 @@
       <div v-if="!isShow" @click="isShow = true" class="btn_zhankai" slot="btn_zhankai">
         <i class="iconfont icon-more"></i>
       </div>
-      <vAside class="ui_header" slot="aside"/>
+      <vAside class="ui_header" slot="aside" />
       <vSelect slot="select" :type="type"></vSelect>
     </mbui>
   </div>
@@ -63,7 +45,7 @@ import vSelect from "./ui/select.vue";
 
 
 export default {
-  props:['type'],
+  props: ['type', 'exhibition'],
   components: {
     mbui,
     vSelect,
@@ -72,40 +54,46 @@ export default {
   data() {
     return {
       params: "",
-      isShow:true,
+      isShow: true,
       selected: '',
-      selectExh:{},
-      list:[]
+      selectExh: {},
+      list: []
     };
   },
-  watch:{
-    selected:{
-      deep:true,
-      handler:function (newVal) {
+  watch: {
+    selected: {
+      deep: true,
+      handler: function (newVal) {
         console.log(newVal);
       }
     }
   },
   methods: {
-    handleifrclk(){
+    handleifrclk() {
       console.log(1111);
     },
-    getList(){
-      window.$.ajax({url:`${this.g_CDN}fdkk/data.json`,success:(data)=>{
-        this.list=data.list
-        this.selectExh = this.list[0]
-        this.selected = this.selectExh.scenes[0]
-      }})
+    getList() {
+      window.$.ajax({
+        url: `${this.g_CDN}fdkk/data.json`, success: (data) => {
+          this.list = data.list
+          if (this.exhibition) {
+            this.selectExh = this.list.find(item => item.id == this.exhibition)
+          } else {
+            this.selectExh = this.list[0]
+          }
+          this.selected = this.selectExh.scenes[0]
+        }
+      })
     },
     onIframLoad() {
       window.onmessage = () => {
-      
+
       };
     },
   },
-  mounted(){
+  mounted() {
     this.getList()
-    this.$bus.$on('showM',()=>{
+    this.$bus.$on('showM', () => {
       this.isShowM = true
     })
   }
@@ -118,26 +106,31 @@ export default {
   height: 100%;
   background: #fcfcfc;
   text-align: center;
-  > iframe {
+
+  >iframe {
     width: 100%;
     height: 100%;
   }
+
   .img_ul {
     width: 100%;
     position: relative;
-    > ul {
+
+    >ul {
       overflow-x: auto;
       display: inline-block;
-      background: linear-gradient(to right,rgba(32,32,32,0),rgba(32,32,32,1),rgba(32,32,32,0));
+      background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
       min-width: 50%;
-      > li {
+
+      >li {
         cursor: pointer;
         list-style: none;
         display: inline-block;
         margin: 8px 10px;
         position: relative;
         padding-bottom: 8px;
-        > div {
+
+        >div {
           width: 68px;
           height: 68px;
           overflow: hidden;
@@ -145,20 +138,23 @@ export default {
           border-radius: 4px;
           cursor: pointer;
           color: rgba(256, 256, 256, 0.4);
-          > img {
+
+          >img {
             position: absolute;
             top: 50%;
             left: 50%;
             height: 100%;
             transform: translate(-50%, -50%);
           }
+
           .iconfont {
             position: absolute;
             left: 4px;
             top: 4px;
             z-index: 99;
           }
-          > span {
+
+          >span {
             text-align: center;
             display: inline-block;
             background: rgba(0, 0, 0, 0.3);
@@ -171,21 +167,25 @@ export default {
             width: 100%;
           }
         }
+
         .bar {
           display: none;
         }
+
         .pic-name {
           background: rgba(0, 0, 0, 0.6);
           position: absolute;
           left: 0;
           bottom: 0;
           text-align: center;
+
           /deep/ span {
             word-break: keep-all;
             white-space: nowrap;
             font-size: 12px;
           }
         }
+
         &.active {
           .bar {
             display: inline-block;
@@ -197,7 +197,8 @@ export default {
             height: 2px;
             background: @color;
           }
-          >div{
+
+          >div {
             color: rgba(256, 256, 256, 1);
           }
         }
@@ -211,19 +212,23 @@ export default {
     border-radius: 30px;
     padding: 6px 15px;
     display: inline-block;
-    > ul {
+
+    >ul {
       overflow-x: auto;
       display: flex;
+
       &::-webkit-scrollbar {
         display: none;
       }
-      > li {
+
+      >li {
         border: 1px solid rgba(256, 256, 256, 0.4);
         border-radius: 24px;
         padding: 6px 9px;
         margin: 0 5px;
         cursor: pointer;
-        > span {
+
+        >span {
           font-size: 16px;
           display: inline-block;
           vertical-align: middle;
@@ -231,27 +236,30 @@ export default {
           word-break: keep-all;
           color: rgba(256, 256, 256, 0.4);
         }
+
         &.active {
           padding: 6px 12px;
           border: 1px solid @color;
-          > span {
+
+          >span {
             color: #fff;
           }
         }
       }
     }
   }
-  
-  .btn_zhankai{
+
+  .btn_zhankai {
     position: fixed;
     left: 50%;
     bottom: 8px;
     transform: translateX(-50%);
-    background: rgba(0,0,0,.3);
+    background: rgba(0, 0, 0, .3);
     border-radius: 50%;
     padding: 6px;
     cursor: pointer;
-    >i{
+
+    >i {
       font-size: 28px;
       cursor: pointer;
     }

src/framework/show/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="mbcon">
     <audio ref="vbgm" class="noshow" loop :src="`${g_CDN}audio/bgm.mp3`"></audio>
-    <v-pano :exhibition="exhibition" v-if="exhibition" />
-    <template v-else>
-      <transition name="fade">
-        <welcome v-if="welcome"/>
-      </transition>
-      <v-fdkk :type="type" v-if="type=='fdkk'" />
-      <v-pano :type="type" v-else/>
-    </template>
+    <!-- <v-fdkk :exhibition="exhibition" v-if="exhibition" />
+    <template v-else> -->
+    <transition name="fade">
+      <welcome v-if="welcome && !exhibition && !area" />
+    </transition>
+    <v-fdkk :exhibition="exhibition" :type="type" v-if="type == 'fdkk'" />
+    <v-pano :type="type" :area="area" v-else />
+    <!-- </template> -->
   </div>
 </template>
 
@@ -23,45 +23,56 @@ export default {
     vPano,
     welcome
   },
-  data(){
-    return{
-      type:'fdkk',
-      exhibition:'',
+  data() {
+    return {
+      type: 'fdkk',
+      exhibition: '',
       isBgm: false,
       welcome: false,
-      isKj:false
+      area: ''
     }
   },
-  watch:{
-    isBgm(newVal){
-      !newVal?this.$refs.vbgm.pause():this.$refs.vbgm.play()
+  watch: {
+    isBgm(newVal) {
+      !newVal ? this.$refs.vbgm.pause() : this.$refs.vbgm.play()
     }
   },
-  mounted(){
-    this.$nextTick(()=>{
-      this.welcome = true
-    })
-    this.$bus.$on('changeType',(data)=>{
+  mounted() {
+
+    this.$bus.$on('changeType', (data) => {
       this.type = data
     })
 
-    this.$bus.$on('toggleBgm',(data)=>{
+    this.$bus.$on('toggleBgm', (data) => {
       this.isBgm = data
     })
 
-    this.$bus.$on('closeWel',()=>{
+    this.$bus.$on('closeWel', () => {
       this.welcome = false
       this.isBgm = true
     })
 
     this.exhibition = this.getQueryVariable('exhibition')
-   
+
+    this.area = this.getQueryVariable('type')
+
+
+    this.$nextTick(() => {
+      this.welcome = true
+      if (this.exhibition) {
+        this.type = 'fdkk'
+      }
+      if (this.area) {
+        this.type = 'pano'
+      }
+    })
+
   }
 }
 </script>
 
 <style lang="less" scoped>
-.mbcon{
+.mbcon {
   width: 100%;
   height: 100%;
 }

src/framework/show/pano.vue

@@ -44,7 +44,7 @@ import vSelect from "./ui/select.vue";
 
 
 export default {
-  props: ['type', 'exhibition'],
+  props: ['type', 'exhibition','area'],
   components: {
     mbui,
     vSelect,
@@ -150,8 +150,8 @@ export default {
       window.$.ajax({
         url: `${this.g_CDN}pano/data.json`, success: (data) => {
           this.list = data.list
-          if (this.exhibition) {
-            this.selectExh = this.list.find(item => item.id == this.exhibition)
+          if (this.area) {
+            this.selectExh = this.list.find(item => item.id == this.area)
           } else {
             this.selectExh = this.list[0]
           }

src/framework/showMobile/fdkk.vue

@@ -1,31 +1,18 @@
 <template>
   <div class="ifrcon">
-    <iframe
-      allowfullscreen="true"
-      ref="iframe"
-      :key="selected.id"
-      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`"
-      frameborder="0"
-      @click="handleifrclk"
-    ></iframe>
-    <mbui :isShow="isShowM" @close="isShowM =false">
+    <iframe allowfullscreen="true" ref="iframe" :key="selected.id"
+      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0" @click="handleifrclk"></iframe>
+    <mbui :isShow="isShowM" @close="isShowM = false">
       <div class="img_ul" slot="imgList">
         <ul v-if="selectExh.scenes">
-          <li
-            v-for="(item, i) in selectExh.scenes"
-            @click="selected = item"
-            :key="i"
-            :class="{ active: selected.id == item.id }"
-          >
+          <li v-for="(item, i) in selectExh.scenes" @click="selected = item" :key="i"
+            :class="{ active: selected.id == item.id }">
             <div>
-              <img :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
-              <rollName
-                :offset="20"
-                :active="selected.id == item.id"
-                class="pic-name"
-                :myref="'subw' + item.id"
-                :name="item.title"
-              />
+              <img
+                :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`"
+                v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
+              <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
+                :name="item.title" />
             </div>
             <span class="bar"></span>
           </li>
@@ -34,21 +21,16 @@
 
       <div class="txt_ul" slot="txtList">
         <ul>
-          <li
-            v-for="(item, i) in list"
-            @click="selectExh = item"
-            :key="i"
-            :class="{ active: selectExh.id == item.id }"
-          >
+          <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
             <span>{{ selectExh.id == item.id ? item.title : item.short }}</span>
           </li>
         </ul>
       </div>
 
       <div class="btn_zhankai" slot="btn_zhankai">
-        <img @click="isShowM=true"  :src="require('@/assets/images/menu.png')" alt="">
+        <img @click="isShowM = true" :src="require('@/assets/images/menu.png')" alt="">
       </div>
-      <vHeader class="ui_header" slot="header"/>
+      <vHeader class="ui_header" slot="header" />
       <vSelect :type="type" slot="select"></vSelect>
     </mbui>
   </div>
@@ -61,7 +43,7 @@ import vSelect from "./ui/select.vue";
 
 
 export default {
-  props:['type'],
+  props: ['type', 'exhibition'],
   components: {
     mbui,
     vSelect,
@@ -70,35 +52,41 @@ export default {
   data() {
     return {
       params: "",
-      isShowM:true,
+      isShowM: true,
       selected: '',
-      selectExh:{},
-      list:[]
+      selectExh: {},
+      list: []
     };
   },
-  watch:{
-    selected:{
-      deep:true,
-      handler:function (newVal) {
+  watch: {
+    selected: {
+      deep: true,
+      handler: function (newVal) {
         console.log(newVal);
       }
     }
   },
   methods: {
-    handleifrclk(){
+    handleifrclk() {
       console.log(1111111);
     },
-    getList(){
-      window.$.ajax({url:`${this.g_CDN}fdkk/data.json`,success:(data)=>{
-        this.list=data.list
-        this.selectExh = this.list[0]
-        this.selected = this.selectExh.scenes[0]
-      }})
+    getList() {
+      window.$.ajax({
+        url: `${this.g_CDN}fdkk/data.json`, success: (data) => {
+          this.list = data.list
+          if (this.exhibition) {
+            this.selectExh = this.list.find(item => item.id == this.exhibition)
+          } else {
+            this.selectExh = this.list[0]
+          }
+          this.selected = this.selectExh.scenes[0]
+        }
+      })
     }
   },
-  mounted(){
+  mounted() {
     this.getList()
-    this.$bus.$on('showM',()=>{
+    this.$bus.$on('showM', () => {
       this.isShowM = true
     })
   }
@@ -110,13 +98,16 @@ export default {
   width: 100%;
   height: 100%;
   background: #fcfcfc;
-  > iframe {
+
+  >iframe {
     width: 100%;
     height: 100%;
   }
+
   .img_ul {
     width: 100%;
     position: relative;
+
     // &::before,
     // &::after {
     //   background: linear-gradient(
@@ -143,42 +134,47 @@ export default {
     //     rgba(0, 0, 0, 0)
     //   );
     // }
-    > ul {
+    >ul {
       overflow-x: auto;
       display: flex;
       justify-content: center;
+
       &::-webkit-scrollbar {
         display: none;
       }
 
-      > li {
+      >li {
         cursor: pointer;
         list-style: none;
         display: inline-block;
         margin: 0 5px;
         position: relative;
         padding-bottom: 7px;
-        > div {
+
+        >div {
           width: 68px;
           height: 68px;
           overflow: hidden;
           position: relative;
           border-radius: 8px;
           cursor: pointer;
-          > img {
+
+          >img {
             position: absolute;
             top: 50%;
             left: 50%;
             height: 100%;
             transform: translate(-50%, -50%);
           }
+
           .iconfont {
             position: absolute;
             left: 4px;
             top: 4px;
             z-index: 99;
           }
-          > span {
+
+          >span {
             text-align: center;
             display: inline-block;
             background: rgba(0, 0, 0, 0.3);
@@ -191,21 +187,25 @@ export default {
             width: 100%;
           }
         }
+
         .bar {
           display: none;
         }
+
         .pic-name {
           background: rgba(0, 0, 0, 0.6);
           position: absolute;
           left: 0;
           bottom: 0;
           text-align: center;
+
           /deep/ span {
             word-break: keep-all;
             white-space: nowrap;
             font-size: 12px;
           }
         }
+
         &.active {
           .bar {
             display: inline-block;
@@ -228,18 +228,22 @@ export default {
     border: 2px solid @color;
     border-radius: 30px;
     padding: 8px 15px 10px;
-    > ul {
+
+    >ul {
       overflow-x: auto;
       display: flex;
+
       &::-webkit-scrollbar {
         display: none;
       }
-      > li {
+
+      >li {
         border: 1px solid rgba(256, 256, 256, 0.4);
         border-radius: 24px;
         padding: 6px 9px;
         margin: 0 5px;
-        > span {
+
+        >span {
           font-size: 16px;
           display: inline-block;
           vertical-align: middle;
@@ -247,25 +251,28 @@ export default {
           word-break: keep-all;
           color: rgba(256, 256, 256, 0.4);
         }
+
         &.active {
           padding: 6px 12px;
           border: 1px solid @color;
-          > span {
+
+          >span {
             color: #fff;
           }
         }
       }
     }
   }
-  
-  .ui_header{
-  }
-  .btn_zhankai{
+
+  .ui_header {}
+
+  .btn_zhankai {
     position: fixed;
     left: 50%;
     bottom: 24px;
     transform: translateX(-50%);
-    >img{
+
+    >img {
       width: 40px;
       height: 40px;
     }

src/framework/showMobile/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="mbcon">
     <audio ref="vbgm" class="noshow" loop :src="`${g_CDN}audio/bgm.mp3`"></audio>
-    <v-pano :exhibition="exhibition" v-if="exhibition" />
-    <template v-else>
+    <!-- <v-fdkk :exhibition="exhibition" v-if="exhibition" /> -->
+    <!-- <template v-else> -->
       <transition name="fade">
-        <welcome v-if="welcome"/>
+        <welcome v-if="welcome && !exhibition && !area" />
       </transition>
-      <v-fdkk :type="type" v-if="type=='fdkk'" />
-      <v-pano :type="type" v-else/>
-    </template>
+      <v-fdkk :exhibition="exhibition" :type="type" v-if="type == 'fdkk'" />
+      <v-pano :type="type" :area="area" v-else />
+    <!-- </template> -->
   </div>
 </template>
 
@@ -30,7 +30,8 @@ export default {
       type:'fdkk',
       exhibition:'',
       isBgm: false,
-      welcome: true
+      welcome: true,
+      area: ''
     }
   },
   watch:{
@@ -56,12 +57,21 @@ export default {
       this.isBgm = true
       this.$bus.$emit('showM',true)
     })
+    
+    this.exhibition = this.getQueryVariable('exhibition')
 
+    this.area = this.getQueryVariable('type')
 
 
-
-
-    this.exhibition = this.getQueryVariable('exhibition')
+    this.$nextTick(() => {
+      this.welcome = true
+      if (this.exhibition) {
+        this.type = 'fdkk'
+      }
+      if (this.area) {
+        this.type = 'pano'
+      }
+    })
   }
 }
 </script>

src/framework/showMobile/pano.vue

@@ -43,7 +43,7 @@ import vSelect from "./ui/select.vue";
 
 
 export default {
-  props: ['type', 'exhibition'],
+  props: ['type', 'exhibition', 'area'],
   components: {
     mbui,
     vSelect,
@@ -151,8 +151,8 @@ export default {
       window.$.ajax({
         url: `${this.g_CDN}pano/data.json`, success: (data) => {
           this.list = data.list
-          if (this.exhibition) {
-            this.selectExh = this.list.find(item => item.id == this.exhibition)
+          if (this.area) {
+            this.selectExh = this.list.find(item => item.id == this.area)
           } else {
             this.selectExh = this.list[0]
           }

src/framework/showMobile/ui/intro.vue

@@ -56,9 +56,9 @@ export default {
     position: fixed;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 20px;
-    max-height: 90vh;
+    max-height: 80vh;
     > div {
-      max-height: 80vh;
+      max-height: 70vh;
       overflow-y: auto;
       > p {
         margin-bottom: 20px;
@@ -67,7 +67,7 @@ export default {
         margin: 0 0;
         line-height: 1.5;
         text-align: justify;
-        max-height: 80vh;
+        max-height: 70vh;
         overflow-y: auto;
         text-indent: 32px;
       }