301hospital/web/src/components/exhibition/index.vue

<template>
  <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
    <div class="p-title">
      <div class="ptleft" @click="loadother">
        <img
          class="pbg"
          :src="require(`@/assets/images/project/exb.png`)"
          alt=""
        />
        <img
          class="lg"
          :src="require(`@/assets/images/project/hospital.png`)"
          alt=""
        />
        <span>当前位置</span>
      </div>

      <div class="ptright">
        <span> {{ currentName.split(" ")[0] }}</span>
      </div>
    </div>
    <div class="exh-con">
      <!-- <img :src="require('@/assets/images/map.png')"> -->
    </div>
    <ul class="exhi-list">
      <li :class="{active:item.name == currentName}" @click="handleItem(item)" v-for="(item, i) in list" :key="i">
        {{ item.name }}
        <img :src="require(`@/assets/images/project/star_active.png`)" alt="" />
      </li>
    </ul>
    <div class="daolan" @click="isShow = !isShow">
      <img :src="require('@/assets/images/icon/daolan.png')" />
      <span>{{ isShow ? "收起" : "展开" }}导览</span>
    </div>
  </div>
</template>

<script>
import { data, region } from "./data";



export default {
  data() {
    return {
      isShow: false,
      currentScene:data[1],
      list: data[1].list,
      currentName: data[1].current.name,
    };
  },
  computed:{


  },

  mounted() {
    this.$bus.$on("floorchanged",res=>{
      this.currentScene = data[res]
      this.list = data[res].list
      this.currentName= data[res].current.name
    })

   



    this.$bus.$on("flyingEnded",res=>{
      let retmp =Object.keys(region)

      for (let i = 0; i < retmp.length; i++) {
        let item = retmp[i];
        if(region[item].find(sub=>sub == res.id)) {
          this.currentName = item
          return
        }
      }
      
    })

  },
  methods: {
    loadother() {
      $.ajax({
        url: "static/data/second_floor.json",
        method: "GET",
        success(res) {
          grendCAD(
            res,
            document.documentElement,
            "#4f7d71",
            "#fcf5d3",
            "1px",
            "cad1"
          );
        },
      });
    },
    handleItem(item) {
      this.currentName = item.name;
      let { x, y, z, w } = item.quaternion;
      item.pano &&
        player.blackToPano({
          pano: player.model.panos.index[item.pano],
          quaternion: new THREE.Quaternion(x, y, z, w),
        });
    },
  },
  watch: {
    isShow(newVal) {
      let css = newVal ? 8 : -260;

      $(".cad1").css({ right: css + "px" });

      if (window.number == "1149_2") {
        $(".cad").css({ right: css - 30 + "px" });
        $(".cad1").css({ right: css + "px" });
      } else {
        $(".cad").css({ right: css + "px" });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.parimaryExhibtion {
  width: 280px;
  transform: translateX(280px);
  transition: all 0.3s ease;
  color: #fff;
  .daolan {
    cursor: pointer;
    position: absolute;
    right: 280px;
    background-color: rgba(103, 97, 86, 0.7);
    border-radius: 5px 0px 0px 5px;
    top: 24%;
    padding: 10px;
    > img {
      width: 16px;
      transform: rotate(180deg);
      margin-bottom: 4px;
    }
  }
  .p-title {
    position: relative;
    margin-bottom: 2px;
    .ptleft {
      position: absolute;
      bottom: 0;
      left: 0;
      .pbg {
      }
      .lg {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 30px;
      }
      > span {
        width: 72px;
        height: 18px;
        position: absolute;
        left: 46px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .ptright {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: rgba(80, 80, 80, 0.7);
      > span {
        display: inline-block;
        width: 50%;
        margin-left: 80px;
      }
    }
  }
  .exh-con {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(103, 97, 86, 0.7);
    border: 2px solid #e2c59a;
    padding: 20px 0;
    width: 100%;
    height: 200px;
    > img {
      width: 80%;
    }
  }
  .exhi-list {
    border: 2px solid #e2c59a;
    background-color: rgba(103, 97, 86, 0.7);
    border-top: none;
    width: 100%;
    padding: 20px 0;
    > li {
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      cursor: pointer;
      text-align: left;
      position: relative;
      > img {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
      }
      &:hover,&.active {
        color: #ffe0a6;
        > img {
          display: inline-block;
        }
      }
    }
  }
}

.daolanactive {
  transform: translateX(0);
  .daolan {
    > img {
      width: 16px;
      transform: rotate(0);
      margin-bottom: 4px;
    }
  }
}
</style>

<style lang="less">
#cad1 {
  .sign {
    display: none !important;
  }
}

.hidemap {
  g > g {
    &:not(.sign) {
      display: none !important;
    }
  }
}
</style>