YuHuaTai-Pc/SWKK/src/views/Home.vue

<!--  -->
<template>
  <div class="Home" @click.once="onceClickMusic">
    <div class="loading" v-show="loding">
      <div class="loadBox">
        <div class="loadIcon">
          <img src="../assets/img/loading.png" alt="" />
        </div>
        <div class="txt">加载中</div>
      </div>
    </div>
    <div class="box" @click="stopPlay(false)"></div>

    <!-- 右上地图 -->
    <div class="rightMap" v-show="!loding && numSta === 2">
      <div class="row1" @click="cutFool('1')" :class="{ active: num === '1' }">
        <div class="rowll"></div>
        <div class="rowrr">一层</div>
      </div>
      <div class="row1" @click="cutFool('2')" :class="{ active: num === '2' }">
        <div class="rowll"></div>
        <div class="rowrr">二层</div>
      </div>
    </div>

    <!-- 右下按钮  -->
    <Rbottom
      ref="RbottomRef"
      @cutKankan="cutKankan"
      @daoLanCut="daoLanCut"
      @stopPlay="stopPlay"
      :acList="partId"
      :playing="playing"
      :progressPart="progressPart"
      :clickBottomAc.sync="clickBottomAc"
      @openHot="openHot"
    />

    <!-- 左上名字和介绍 -->
    <div class="Ltitle" :class="{ open: title }">
      <div class="Ltitlell" @click="title = !title">
        <img src="../assets/img/LeftTop/title_left.png" alt="" v-if="title" />
        <img src="../assets/img/LeftTop/title_right.png" alt="" v-else />
      </div>
      <div class="Ltitlerr" v-show="title">
        南京雨花台烈士纪念馆{{ num === "1" ? "一" : "二" }}楼
      </div>
    </div>

    <!-- 点击热点出来的界面 -->
    <Hot
      v-if="sonInfo"
      :info="sonInfo"
      :hotIdOrName="hotIdOrName"
      @hotClose="hotClose"
    />

    <!-- 新手指引页面 -->
    <Guide />
  </div>
</template>

<script>
import Hot from "../components/Hot.vue";
import Guide from "../components/Guide.vue";
import Rbottom from "../components/Rbottom.vue";
export default {
  name: "Home",
  //import引入的组件需要注入到对象中才能使用
  components: { Rbottom, Hot, Guide },
  data() {
    //这里存放数据
    return {
      kankan: null,
      num: "",
      loding: true,
      title: true,
      numSta: 2,
      // -------自动导览数据
      partId: 0,
      frameId: null,
      progress: 0,
      progressPart: 0,
      disable: false,
      playing: false,
      sonInfo: null,
      hotIdOrName: null,
      clickBottomAc: false,

      // 点位背景音乐的状态
      dotAudioSrc: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 热点点击关闭
    hotClose() {
      this.sonInfo = null;
      if (window.bacMusic) {
        setTimeout(() => {
          this.$refs.RbottomRef.opMusic(true);
        }, 100);
      }
    },

    onceClickMusic() {
      this.$refs.RbottomRef.opMusic(true);
      setTimeout(() => {
        window.bacMusic = true;
      }, 500);
    },

    async stopPlay(val) {
      if (!val && this.playing) this.$refs.RbottomRef.leftCut(-1);
      let player = await this.kankan.TourManager.player;
      player.pause();

      this.progress = 0;
    },
    async play() {
      let player = await this.kankan.TourManager.player;
      this.progress = 0;
      if (this.playing) {
        player.pause();
      } else {
        player.play();
      }
    },

    // 场景导览切换
    async daoLanCut(index) {
      if (this.disable) {
        return;
      }
      this.partId = index;
      this.frameId = 0;
      this.disable = true;
      this.progress = 0;
      this.progressPart = 0;

      let player = await this.kankan.TourManager.player;
      player.pause();
      await player.selectPart(index);
      this.disable = false;

      this.clickBottomAc = true;
    },

    // 切换楼层
    cutFool(val) {
      // window.location.replace(`#/Swkk${val}`)
      window.location.replace(`/YHT/Swkk/index.html#/${val}`);
      setTimeout(() => {
        location.reload(true);
      }, 200);
    },

    cutKankan(ind) {
      if (ind === 0) {
        // 点击自动漫游
        // this.kankan.Camera.panorama();
        this.play();
        this.progressPart = 0;

        const dotAudioDomId = document.querySelector("#dotAudioDomId");
        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
      }
      if (ind === 2) this.kankan.Camera.panorama();
      else if (ind === 3) this.kankan.Camera.dollhouse();
      else if (ind === 4) this.kankan.Camera.floorplan();
    },

    openHot(data) {
      this.openHotFu(data);
    },
    // 封装点击热点的函数
    openHotFu(data) {
      // console.log('-------',data);
      // 点击热点的时候当前背景音乐的播放状态
      let dom = document.querySelector("#bacMusic");
      window.bacMusic = !dom.paused;
      setTimeout(() => {
        this.$refs.RbottomRef.opMusic(false);
      }, 700);

      let temp = [];

      // 如果是多个热点合并
      if (data.title.split("&")[1]) {
        this.baseHotData.forEach((v) => {
          if (v.title.split("&")[1] === data.title.split("&")[1]) {
            temp.push(v);
            if (v.media && v.media.image && v.media.image.length > 1) {
              v.media.image.forEach((p, pI) => {
                if (pI !== 0) temp.push({ ...v, media: { image: [p] } });
              });
            }
          }
        });
        let obj = {
          image: [],
          audio: [],
          link: [],
          video: [],
        };
        temp.forEach((v) => {
          if (obj[v.type]) obj[v.type].push(v);
        });
        for (const k in obj) {
          if (k === "audio") {
            obj[k].reverse();
          }
        }

        this.hotIdOrName = {
          id: data.sid,
          name: data.title.split("&")[0],
        };
        this.sonInfo = obj;
      } else {
        this.hotIdOrName = {
          id: data.sid,
          name: data.title,
        };
        // 单个热点
        this.sonInfo = { [data.type]: [data] };
      }
      // 如果只需监听热点点击，实现其他逻辑操作，下面的代码不需要调用

      // 聚焦当前点击的热点
      window.TagView.focus(data.sid);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let num = this.$route.params.id;
    this.num = num;
    if (num === "1") num = "KJ-aigSkgvRWR";
    else if (num === "2") num = "KJ-ufjLwlSXba";
    window.KKNum = num;
    let kankan = new KanKan({
      dom: ".box",
      num,
      // 本地化加上
      deploy:'local',
      resource:'',
      server:''
      
    });
    kankan.use("MinMap", {
      theme: {
        camera_fillStyle: "#930909",
      },
    });

    kankan.use("TourPlayer").then((player) => {
      player.on("play", ({ partId, frameId }) => {
        this.playing = true;
      });
      player.on("pause", ({ partId, frameId }) => {
        this.playing = false;
      });
      player.on("end", async () => {
        this.playing = false;
        this.progress = 0;
        this.frameId = null;
        this.$refs.RbottomRef.leftCut(-1);
        // 兼容最后一个画面没有进度的问题
        this.progressPart = 100;
      });

      let currPartId;
      let currFrames;

      player.on("progress", ({ partId, frameId, progress }) => {
        // 不让自动漫游多次点击
        if (frameId === 0) {
          // 防止多次点击自动漫游
          let mainApp = document.querySelector("#app");
          mainApp.style.pointerEvents = "auto";
        }
        // 画面进度
        this.partId = partId;
        this.frameId = frameId;
        this.progress = Number(progress * 100).toFixed(5);
        // 片段进度
        if (this.tours.length == 1) {
          this.progressPart = this.progress;
        } else {
          if (currPartId != partId) {
            currPartId = partId;
            currFrames = this.tours[partId].list.length;
            this.progressPart = 0;
          }
          this.progressPart += progress / currFrames;
        }
      });
    });

    // 有关球幕视频控制背景音乐
    kankan.Scene.on("panorama.videorenderer.startvideo", () => {
      // 进入球幕视频
      let dom = document.querySelector("#bacMusic");
      window.bacMusic = !dom.paused;
      setTimeout(() => {
        this.$refs.RbottomRef.opMusic(false);

        // 如果有对应的点位音频，删除
        const dotAudioDomId = document.querySelector("#dotAudioDomId");
        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
      }, 200);
      // 暂停背景音乐
    });
    kankan.Scene.on("panorama.videorenderer.resumerender", () => {
      // 进入球幕视频
      let dom = document.querySelector("#bacMusic");
      window.bacMusic = !dom.paused;
      setTimeout(() => {
        this.$refs.RbottomRef.opMusic(false);

        // 如果有对应的点位音频，删除
        const dotAudioDomId = document.querySelector("#dotAudioDomId");
        if (dotAudioDomId) document.body.removeChild(dotAudioDomId);
      }, 200);
      // 暂停背景音乐
    });
    kankan.Scene.on("panorama.videorenderer.suspendrender", () => {
      // 退出球幕视频
      if (window.bacMusic) {
        setTimeout(() => {
          this.$refs.RbottomRef.opMusic(true);
        }, 100);
      }
      // 恢复背景音乐
    });

    // 导览数据
    kankan.TourManager.on("loaded", (tours) => {
      // console.log("--------", tours);
      this.tours = tours;
      this.$refs.RbottomRef.baseSw(tours);
    });

    // 全部热点数据
    kankan.store.on("tags", (tags) => {
      this.$refs.RbottomRef.getHotListToFather(tags.tags);
      this.baseHotData = tags.tags.reverse();
    });

    // 热点
    kankan
      .use("TagView", {
        render(data) {
          let arrTitle = data.title.split("&");
          let flag = false;
          if (arrTitle[2] || !data.title.includes("&")) flag = true;

          let title = data.title.split("&")[0];

          return `<span class="tag-icon animate" title=${title} style="${
            flag ? "" : "display: none;"
          };background-image:url({{icon}})"></span><div class="tag-body"></div>`;
        },
      })
      .then((TagView) => {
        window.TagView = TagView;
        // 监听手动点击事件
        TagView.on("click", (e) => {
          this.openHotFu(e.data);
        });
      });

    kankan.render();

    kankan.Scene.on("loaded", () => {
      this.loding = false;
      //设置地面logo
      kankan.Scene.setFloorLogo({
        url: "img/diBiao.png",
        size: 40,
      });
    });

    let obj = {
      floorplan: 4,
      dollhouse: 3,
      panorama: 2,
    };
    // 监听看看的模式
    kankan.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
      let num = obj[toMode];
      this.numSta = num;
      if (this.$refs.RbottomRef && this.$refs.RbottomRef.leftCut) {
        this.$refs.RbottomRef.leftCut(num);
      }
    });
    // 每次移动了点位就会触发
    kankan.Camera.on("flying.started", (pano) => {
      // 如果不是自动导览改变了点位的时候，才有手动移动到固定点位的逻辑
      if (!this.playing) {
        // console.log(123456, pano);
        // 固定点位的id
        const dotId = pano.panoId;

        // 走到固定点位播放音频
        const obj = {
          60: "dingxiang.mp3",
          112: "liyunsheng.mp3",
        };

        // 记录当前点位音乐的路径，用于下面的对比

        if (obj[dotId]) {
          // 如果当前已经在播放音频了，并且对应的src相等
          if (this.dotAudioSrc === obj[dotId]) return;
          else {
            // 如果当前点位音频的src不相等
            this.dotAudioSrc = obj[dotId];

            const audio = document.createElement("audio");
            audio.src = `dotAudio/${obj[dotId]}`;
            audio.id = "dotAudioDomId";
            document.body.appendChild(audio);

            // 暂停背景音乐并且记录背景音乐的状态
            let dom = document.querySelector("#bacMusic");
            window.bacMusic = !dom.paused;
            setTimeout(() => {
              this.$refs.RbottomRef.opMusic(false);
            }, 200);

            // 播放点位的对应音频
            audio.play();
          }
        } else {
          this.dotAudioSrc = "";

          // 如果有对应的点位音频，删除
          const dotAudioDomId = document.querySelector("#dotAudioDomId");
          if (dotAudioDomId) document.body.removeChild(dotAudioDomId);

          // 离开的有音频的点位，看看之前的背景音乐状态，判断时候播放背景音乐
          if (window.bacMusic) {
            setTimeout(() => {
              this.$refs.RbottomRef.opMusic(true);
            }, 100);
          }
        }
      }

      this.clickBottomAc = false;
    });
    this.kankan = kankan;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@keyframes loading {
  100% {
    left: -900px;
  }
}

.Home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .loadBox {
      color: #fff;
      text-align: center;
      letter-spacing: 2px;
      width: 110px;
      height: 110px;
      border-radius: 2px;

      .loadIcon {
        width: 60px;
        height: 60px;
        position: relative;
        overflow: hidden;
        margin: 10px auto;

        img {
          height: 60px;
          position: absolute;
          left: 0;
          top: 0;
          animation: loading 1s steps(15) infinite;
        }
      }
    }
  }

  /deep/[xui_min_map] {
    width: 180px;
    height: 180px;
    border: 2px solid #d8b275;
    background-color: rgba(81, 32, 32, 0.4);
    border-radius: 0 0 8px 8px;
    right: 20px;
    top: 65px;
  }

  .rightMap {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 28px;
    border: 2px solid #d8b275;

    border-radius: 8px 8px 0 0;
    color: #fff;
    width: 180px;
    height: 40px;
    background-color: #930909;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;

    .row1 {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;

      .rowll {
        margin-right: 6px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #d8b275;
        position: relative;
      }

      .rowrr {
        padding-bottom: 2px;
      }
    }

    .active {
      color: #d8b275;
      pointer-events: none;

      .rowll {
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          width: 10px;
          height: 10px;
          background-color: #d8b275;
        }
      }
    }
  }

  .Ltitle {
    transition: all 0.3s;
    position: absolute;
    z-index: 10;
    left: -196px;
    top: 28px;
    width: 230px;
    height: 34px;
    background-image: url("../assets/img/LeftTop/label_title.png");
    background-size: 100% 100%;
    display: flex;

    .Ltitlell {
      position: relative;
      left: 196px;
      cursor: pointer;
      width: 44px;
      height: 100%;
      padding: 6px 0 0px 10px;

      & > img {
        width: 8px;
        height: 13px;
      }
    }

    .Ltitlerr {
      width: 186px;
      height: 40px;
      line-height: 32px;
      font-size: 14px;
      color: #fff;
    }
  }

  .open {
    left: 0;

    .Ltitlell {
      left: 0;
    }
  }
}
</style>