ZHZRZYJ/scene/src/components/info/index.vue

<template>
  <div class="info-box" id="info-left" v-if="title != '' && disc != ''">
    <div class="top">
      <div class="title-box" @click="() => {
        isShow = !isShow;
        isOpenHot = false;
      }
        ">
        <div class="detail">
          <div class="scroll-wrap">
            <div class="scroll-item">
              {{ title }}
            </div>
          </div>
        </div>
        <div class="line"></div>
        <img src="../../assets/img/infoIcon.png" alt="" />
      </div>
      <!-- <img v-show="isShowHotIcon" @click="() => { isOpenHot = !isOpenHot; isShow = false }"
        src="@/assets/images/icon/hot-icon.png" alt=""> -->

      <el-dropdown v-if="curGroup" trigger="click" placement="bottom"
        @command="handleLocation"
      >
        <img src="@/assets/img/list.png" />

        <template #dropdown>
          <el-dropdown-menu class="info-box-dropdown">
            <el-dropdown-item v-for="item in curGroup" :key="item.m" :command="item.m">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <transition name="fade">
      <div class="disc-box" v-if="isShow" v-html="disc"></div>
    </transition>
    <!-- <div class="disc-box" v-if="isShow" v-html="disc"></div> -->
    <!-- <div class="disc-box2" v-show="isOpenHot">
      <img class="close-icon" @click="() => { isOpenHot = false }" src="@/assets/images/icon/icon-close.png" alt="">
      <div class="back-box" @click="back()"><img src="@/assets/images/icon/back.png" alt="">返回上一级场景</div>
      <div class="hot-list">
        <div class="list-title">关联场景</div>
        <div class="list-content">
          <div class="list-item" @mouseover="() => { hotInd = index }" @click="openHot(item, index)"
            @mouseout="() => { hotInd = null }" :class="{ 'active': hotInd === index }" v-for="(item, index) in data"
            :key="index">
            {{ item.info.title ? item.info.title : '热点' }}
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
const GROUP = [
  [
    {
      label: '乾务糖厂码头桁架',
      m: 'KJ-0r8j5EQjXCH'
    },
    {
      label: '乾务糖厂除尘塔',
      m: 'KJ-sF36qa2CucM'
    },
  ]
]

export default {
  components: {},
  data() {
    return {
      title: "",
      disc: "",
      isShow: true,
      isShowHotIcon: false,
      isOpenHot: false,
      data: [],
      hotInd: null,
      curGroup: null
    };
  },
  computed: {},
  watch: {},
  methods: {
    openHot(e, index) {
      // 停止自动导览
      window.player.director.stopTour();
      setTimeout(() => {
        e && e.examine(window.player, true);
        this.hotInd = index;
      }, 200);
    },
    back() {
      if (window.parent) {
        window.parent.window.backFu()
      }
    },
    handleLocation(m) {
      window.location.href = `${location.origin}${location.pathname}?m=${m}`
    }
  },
  created() { },
  mounted() {
    let timeA = -1;

    timeA = window.setInterval(() => {
      if (window.DATA) {
        clearInterval(timeA);
      }
      this.title = window.DATA.name;
      this.disc = window.DATA.summary;
      document.title = window.DATA.name;
    }, 100);

    let timeB = -1;
    timeB = window.setInterval(() => {
      if (window.isHot) {
        clearInterval(timeB);
      }
      if (window.isHot && window.myHotList && window.myHotList.length) {
        if (window.myHotList.length > 0) {
          this.isShowHotIcon = true;
          this.data = window.myHotList.filter((item) => {
            return item.info.linkType != "common"
          });
          setTimeout(() => {
            this.isShow = true
          },1000)
        }
      }
    }, 500)

    setTimeout(() => {
      if (this.isShow) {
        this.isShow = false
      }
    }, 3000)

    const i = GROUP.findIndex(item => {
      return item.findIndex(subItem => subItem.m === window.number) > -1
    })
    if (i > -1) {
      this.curGroup = GROUP[i]
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.info-box {
  position: absolute;
  z-index: 9997;
  height: 42px;
  min-width: 100px;
  top: 10px;
  left: 10px;
  /* transform: translateX(-50%); */
  color: #fff;

  &-dropdown {
    border: none;
    background-color: rgba(94, 26, 19, 0.60);

    /deep/ .popper__arrow {
      display: none;
    }
    .el-dropdown-menu__item {
      color: white;

      &:hover {
        color: #ECC439;
        background: none;
      }
    }
  }
  .top {
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 1s ease;

    img {
      margin-left: 20px;
      cursor: pointer;
    }
  }

  .title-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../assets/img/infoBg.png");
    background-size: 100% 100%;
    font-size: 1.2em;
    font-family: "AdobeHeitiStd";
    cursor: pointer;
    padding: 0 20px;

    .line {
      width: 1px;
      height: 50%;
      background: #fff;
      margin-left: 20px;
    }

    img {
      // width: 25px;
      // height: 25px;
      margin-left: 15px;
      // margin-top: 10px;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 1s ease;
  }

  .fade-enter,
  .fade-leave-to

  /* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
    // height: 0;
    // display: none;
  }

  .disc-box {
    width: 300px;
    background: #5e1b13a4;
    backdrop-filter: blur(10px);
    padding: 30px;
    text-indent: 2em;
    line-height: 25px;
    font-size: 1.2em;
    letter-spacing: 2px;
    margin-top: 10px;
    border-radius: 10px 10px;
    position: relative;
    transition: all 1s ease;
  }

  .disc-box2 {
    width: 300px;
    background: #5e1b13a4;
    backdrop-filter: blur(10px);
    padding: 10px 10px;
    line-height: 25px;
    margin-top: 10px;
    border-radius: 10px 10px;
    font-size: 1.2em;
    position: relative;

    .close-icon {
      position: absolute;
      top: 15px;
      right: 10px;
      cursor: pointer;
    }

    .back-box {
      font-size: 0.9em;
      line-height: 40px;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 400;
      cursor: pointer;

      img {
        transform: calc(0.9);
        margin-right: 10px;
      }
    }

    .hot-list {
      width: 100%;

      .list-title {
        color: #E7C395;
        padding: 0 10px;
      }

      .list-content {
        max-height: 400px;
        overflow: auto;

        .list-item {
          width: 100%;
          height: 30px;
          line-height: 30px;
          color: white;
          text-align: left;
          white-space: nowrap;
          cursor: pointer;
          padding: 0 10px;
        }
      }

      .active {
        color: #E7C395;
        background: #911212;
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .info-box {
    height: 58px;
    width: 300px;
    min-width: 0px;
    transform: scale(0.7);
    left: 10%;

    .title-box {
      font-size: 18px;

      .detail {
        max-width: 70%;

        .scroll-wrap {
          max-width: 100%;
          display: inline-block;
          vertical-align: top;
          overflow: hidden;
          white-space: nowrap;

          .scroll-item {
            animation: scroll linear 7s alternate infinite;
            float: left;
          }

          @keyframes scroll {
            0% {
              margin-left: 0;
              transform: translateX(0);
            }

            10% {
              margin-left: 0;
              transform: translateX(0);
            }

            90% {
              margin-left: 100%;
              transform: translateX(-100%);
            }

            100% {
              margin-left: 100%;
              transform: translateX(-100%);
            }
          }
        }
      }
    }

    .disc-box {
      width: 100%;
    }
  }
}
</style>