15Han_zhan/src/framework/show/pano.vue

<template>
  <div class="ifrcon">
    <!-- 待完善 -->
     <!--       :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0"></iframe>
 -->
    <iframe v-if="selectExh.type==='4dkk'" allowfullscreen="true" ref="iframe" :key="selected.id+selectExh.id"
      :src="`https://www.4dkankan.com/spg.html?m=${selected.id}&hideNav`" frameborder="0"></iframe>
    <div v-else id="pano" class="pano"></div>

    <div v-if="selected && selectExh.type != '4dkk'" class="title">{{ selected.sceneTitle }}</div>
    <mbui :type="type" :class="{ uicon: exhibition }" :isShow="isShowM" @close="isShowM = false">
      <div class="img_ul clip-scroller" slot="imgList">
        <ul>
          <li v-for="(item, i) in currentScenes" @click="handleItem(item)" :key="i"
            :class="{ active: selected.id == item.id }">
            <div>
              <img :src="item.icon" alt="" />
              <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
                :name="item.sceneTitle || item.title" />
            </div>
            <span class="bar"></span>
          </li>
        </ul>
      </div>
      <div class="txt_ul clip-scroller" slot="txtList" v-if="!exhibition">
        <ul>
          <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>

      <div v-if="!isShowM" @click="isShowM = true" class="btn_zhankai" slot="btn_zhankai">
        <i class="iconfont icon-more"></i>
      </div>
      <vAside class="ui_header" slot="aside" />
      <vSelect slot="select" v-if="!exhibition" :type="type"></vSelect>
    </mbui>
  </div>
</template>

<script>
import mbui from "./ui";
import vAside from "./ui/aside.vue";
import vSelect from "./ui/select.vue";



export default {
  props: ['type', 'exhibition','area'],
  components: {
    mbui,
    vSelect,
    vAside
  },
  data() {
    return {
      params: "",
      isShowM: true,
      selected: {},
      selectExh: {},
      currentScenes: [],
      list: [],
      isFirst: true,
      loadFinish: false
    };
  },
  watch: {
    selectExh: {
      deep: true,
      handler: function (newVal) {
        if (newVal) {
          this.isFirst = true
          if (newVal.type === '4dkk') {
            
            this.selectExh = this.list.find(v=>v.id===newVal.id)
            this.selected = this.selectExh.scenes[0]
            this.currentScenes = this.selectExh.scenes.map(item => {
              return {
                ...item,
                // 待完善
                // icon: `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`
                icon: `https://4dkk.4dage.com/scene_view_data/${item.id}/user/thumb-2k.jpg?_=5`
              }
            })
            this.loadFinish = true
          }
          else {
            window.$.ajax({
              dataType: 'json',
              url: `https://airshow.4dkankan.com/pano/${newVal.id}/someData.json?_=${Math.random()}`, success: (data) => {
                this.selected = data.scenes[0]
                this.currentScenes = data.scenes
                this.loadFinish = false
              }
            })
          }

        }
      }
    },
    selected: {
      deep: true,
      handler: function (newVal) {

        window.vrViewFn = () => {
          try {
            this.loadFilsh = true
            if (this.isFirst) {
              this.isFirst = false
            }
            setTimeout(() => {
              this.loadFinish = true
            }, 4000);
          } catch (error) {
            error;
          }
        };

        var settings = {
          "events[skin_events].onloadcomplete": "js(window.vrViewFn());",
          "skin_settings.littleplanetintro": this.isFirst,
          "view.vlookat": newVal.initVisual ? newVal.initVisual.vlookat : 0,
          "view.hlookat": newVal.initVisual ? newVal.initVisual.hlookat : 0,
        };


        window.$("#pano").empty();
        window.removepano("#pano");

        if (this.selectExh.type != '4dkk') {
          window.embedpano({
            // https://4dkk.4dage.com/720yun_fd_manage/fd720_FC5BmPHcV/vtour/tour.xml
            // xml: "%HTMLPATH%/static/template/tour.xml",
            xml: `https://airshow.4dkankan.com/pano/${this.selectExh.id}/${newVal.sceneCode}/vtour/tour.xml`,
            swf: `${this.g_CDN}resource/tour.swf`,
            target: "pano",
            html5: "auto",
            mobilescale: 1,
            vars: settings,
            passQueryParameters: true,
          });
        }

      }
    }
  },
  methods: {
    handleItem(item) {
      if (this.loadFinish) {
        this.selected = item
      }
    },
    getList() {
      // window.$.ajax({url:`code/pano/data.json`,success:(data)=>{
      window.$.ajax({
        url: `${this.g_CDN}pano/data.json`, success: (data) => {
          this.list = data.list
          if (this.area) {
            this.selectExh = this.list.find(item => item.id == this.area)
          } else {
            this.selectExh = this.list[0]
          }
        }
      })
    }
  },
  mounted() {
    this.getList()
    this.$nextTick(() => {
      let el1 = window.$(".clip-scroller > ul")
      Array.from(el1).forEach(item => {
        let frame1 = new window.PerfectScrollbar(item, {
          useBothWheelAxes: true,
          suppressScrollY: true,
          wheelSpeed: 0.8,
        });
        window.$(item).data("scrollbar", frame1);
      })
    });
  }
};
</script>
<style lang="less" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  text-align: center;

  >iframe {
    width: 100%;
    height: 100%;
  }

  .pano {
    width: 100%;
    height: 100%;
  }

  .title {
    --height: 40px;
    position: fixed;
    z-index: 99;
    margin: 0;
    height: var(--height);
    line-height: var(--height);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 0 15px;
    display: inline-block;
    text-shadow: 1px 0 2px rgb(0 0 0 / 16%);
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    -webkit-transition: background 0.3s ease, min-width 0.3s ease,
      border-radius 0.3s ease;
    transition: background 0.3s ease, min-width 0.3s ease,
      border-radius 0.3s ease;
    width: 40%;
    top: 20px;
    background: -webkit-gradient(linear,
        left top,
        right top,
        from(transparent),
        color-stop(29%, rgba(0, 0, 0, 0.2)),
        color-stop(69%, rgba(0, 0, 0, 0.2)),
        to(transparent));
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 0, 0, 0.2) 29%,
        rgba(0, 0, 0, 0.2) 69%,
        transparent);
    margin-top: 0;
    text-align: center;
  }

  .uicon {
    & /deep/ .btm-menu {
      height: 250px;
    }
  }

  .img_ul {
    position: relative;
    display: inline-block;
    min-width: 50%;
    max-width: 100%;

    >ul {
      display: inline-block;
      white-space: nowrap;
      background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
      width: 100%;

      >li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        margin: 8px 10px;
        position: relative;
        padding-bottom: 8px;

        >div {
          width: 68px;
          height: 68px;
          overflow: hidden;
          position: relative;
          border-radius: 4px;
          cursor: pointer;
          color: rgba(256, 256, 256, 0.4);

          >img {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            transform: translate(-50%, -50%);
          }

          .iconfont {
            position: absolute;
            left: 4px;
            top: 4px;
            z-index: 99;
          }

          >span {
            text-align: center;
            display: inline-block;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            left: 0;
            bottom: 0;
            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;
            position: absolute;
            bottom: 0px;
            width: 80%;
            left: 50%;
            transform: translateX(-50%);
            height: 2px;
            background: @color;
          }

          >div {
            color: rgba(256, 256, 256, 1);
          }
        }
      }
    }
  }

  .txt_ul {
    margin: 18px auto;
    border: 2px solid @color;
    border-radius: 30px;
    padding: 6px 15px;
    display: block;
    position: relative;
    max-width: 864px;

    >ul {
      width: 100%;
      display: inline-block;
      white-space: nowrap;

      >li {
        border: 1px solid rgba(256, 256, 256, 0.4);
        border-radius: 24px;
        padding: 6px 9px;
        margin: 0 5px;
        cursor: pointer;
        display: inline-block;

        >span {
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          line-height: 1.2;
          word-break: keep-all;
          color: rgba(256, 256, 256, 0.4);
        }

        &.active {
          padding: 6px 12px;
          border: 1px solid @color;

          >span {
            color: #fff;
          }
        }
      }
    }
  }

  .btn_zhankai {
    position: fixed;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;

    >i {
      font-size: 28px;
      cursor: pointer;
    }
  }

}
</style>

<style lang="less">
.ps__thumb-x {
  width: 0px !important;
}
</style>