HaiDeBao/src/views/gui/BigMap.vue

<template>
  <div class="big-map">
    <button
      class="close"
      @click="$router.go(-1)"
    >
      <img
        class=""
        src="@/assets/images/close.png"
        alt=""
        draggable="false"
      >
    </button>
    <div class="map-wrapper">
      <img
        src="@/assets/images/map.png"
        alt=""
        class="map"
        draggable="false"
      >
      <div
        v-for="(item) in areaListForMap"
        :key="item.id"
        class="area"
        :style="{
          ...{
            top: item.top + 'vw',
            left: item.left + 'vw',
            width: item.width + 'vw',
            height: item.height + 'vw',
          },
          ...item.style
        }"
        @click="onClickRegion(item)"
        v-html="item.nameCn"
      />
    </div>
    <div class="button-wrapper">
      <button
        v-for="(item) in areaListForBtn"
        :key="item.id"
        @click="onClickRegion(item)"
      >
        {{ item.nameCn }}
      </button>
    </div>
  </div>
</template>

<script>
import areaPosInfo from "@/areaPosInfo.js"

export default {
  data() {
    return {
      areaListForMap: [
        { id: '1', nameCn: '速霸CX 104-8+LYYL', nameEn: 'Speedmaster CX 104-8+LYYL', left: 20.3, top: 6.3, width: 49.4, height: 13, reportType: 'speedMasterCx', },
        { id: '2', nameCn: '速霸XL 75-7+L ', nameEn: 'Speed&hyphen;<br>master XL 75-7+L ', left: 5.5, top: 22.5, width: 12.4, height: 34.8, reportType: 'speedMasterXl', },
        { id: '3', nameCn: '速霸SX102-4-P', nameEn: 'Speed&hyphen;<br>master SX 102-4-P', left: 70.7, top: 6.3, width: 10.5, height: 29.7, reportType: 'speedMasterSx', },
        { id: '4', nameCn: '数字工厂', nameEn: 'Digital<br>Factory', left: 48.6, top: 23.6, width: 13.6, height: 16.6, style: { justifyContent: 'flex-start', alignItems: 'flex-start', paddingTop: '1vw', paddingLeft: '2vw', }, reportType: 'digitalFactory', },
        { id: '5', nameCn: '印通工作流程中心', nameEn: 'Prinect Center', left: 40.9, top: 43.4, width: 9.4, height: 4.9, reportType: 'prinectCenter', },
        { id: '6', nameCn: '波拉自动裁切系统300 ', nameEn: 'Polar <br> Cutting <br> System 300 ', left: 5.5, top: 6.3, width: 12.4, height: 13, reportType: 'polarCuttingSystem', },
        { id: '7', nameCn: '斯塔尔折页机KH 82-P', nameEn: 'Stahlfolder KH 82-P', left: 21.3, top: 40.1, width: 11.6, height: 11.6, reportType: 'stahlfolderKh', },
        { id: '8', nameCn: 'Versa&hyphen;<br>fire EP', nameEn: 'Versa&hyphen;<br>fire EP', left: 35.6, top: 49.2, width: 6.2, height: 12.3, reportType: 'versafireEp', },
        { id: '9', nameCn: 'Versa&hyphen;<br>fire EV', nameEn: 'Versa&hyphen;<br>fire EV', left: 42.7, top: 49.2, width: 6.2, height: 12.3, reportType: 'versafireEv', },
        { id: '10', nameCn: '超霸106计算机直接制版机', nameEn: 'Supra&hyphen;<br>setter<br> 106', left: 51.8, top: 51.2, width: 11.2, height: 11.2, reportType: 'suprasetter', },
        { id: '11', nameCn: '海德堡效能管家', nameEn: 'Lifecycle', left: 29, top: 31.5, width: 13.3, height: 8, reportType: 'lifecycle', },
        { id: '12', nameCn: '培训', nameEn: 'Training', left: 52.8, top: 42.5, width: 10.5, height: 3.6, reportType: 'training', },
        { id: '13', nameCn: '咨询', nameEn: 'Consultancy', left: 51.6, top: 46.8, width: 13, height: 3.6, reportType: 'consultancy', },
        { id: '14', nameCn: '捷拉斯', nameEn: 'Gallus', left: 64.5, top: 29.3, width: 5.5, height: 9.2, reportType: 'gallus', },
        { id: '15', nameCn: '海德堡金融服务', nameEn: 'Financial Service', left: 57, top: 29.3, width: 6.9, height: 9.2, reportType: 'financialService', },
        { id: '16', nameCn: '直播间', nameEn: 'Live&hyphen;<br>streaming Room', left: 55.4, top: 66.5, width: 9.8, height: 12.2, reportType: 'livestreamingRoom', },
      ],
      areaListForBtn: [
        { id: '1', nameCn: '速霸CX 104-8+LYYL', nameEn: 'Speedmaster CX 104-8+LYYL', reportType: 'speedMasterCx', },
        { id: '2', nameCn: '速霸XL 75-7+L ', nameEn: 'Speedmaster XL 75-7+L ', reportType: 'speedMasterXl', },
        { id: '3', nameCn: '速霸SX 102-4-P', nameEn: 'Speedmaster SX 102-4-P', reportType: 'speedMasterSx', },
        { id: '4', nameCn: '数字工厂', nameEn: 'Digital Factory', reportType: 'digitalFactory', },
        { id: '5', nameCn: '印通工作流程中心', nameEn: 'Prinect Center', reportType: 'prinectCenter', },
        { id: '6', nameCn: '波拉自动裁切系统300 ', nameEn: 'Polar Cutting System 300 ', reportType: 'polarCuttingSystem', },
        { id: '7', nameCn: '斯塔尔折页机KH 82-P', nameEn: 'Stahlfolder KH 82-P', reportType: 'stahlfolderKh', },
        { id: '8', nameCn: 'Versafire EP', nameEn: 'Versafire EP', reportType: 'versafireEp', },
        { id: '9', nameCn: 'Versafire EV', nameEn: 'Versafire EV', reportType: 'versafireEv', },
        { id: '10', nameCn: '超霸106计算机直接制版机', nameEn: 'Suprasetter 106', reportType: 'suprasetter', },
        { id: '11', nameCn: '海德堡效能管家', nameEn: 'Lifecycle', reportType: 'lifecycle', },
        { id: '12', nameCn: '培训', nameEn: 'Training', reportType: 'training', },
        { id: '13', nameCn: '咨询', nameEn: 'Consultancy', reportType: 'consultancy', },
        { id: '14', nameCn: '捷拉斯', nameEn: 'Gallus', reportType: 'gallus', },
        { id: '15', nameCn: '海德堡金融服务', nameEn: 'Financial Service', reportType: 'financialService', },
        { id: '16', nameCn: '直播间', nameEn: 'Livestreaming Room', reportType: 'livestreamingRoom', },
      ],
      isFlying: false,
      checkingIntervalId: null,
    }
  },
  beforeDestroy() {
    clearInterval(this.checkingIntervalId)
  },
  methods: {
    onClickRegion(regionItem) {
      if (this.isFlying) {
        return
      }
      this.$router.go(-1)
      this.isFlying = true

      globalApi.reportRegionClick(regionItem.reportType)

      const posInfo = areaPosInfo[Number(regionItem.id) - 1]
      // 判断移动到点位结束之后，才允许再次点击
      this.checkingIntervalId = window.setInterval(() => {
        if (window.player.currentPano.id === posInfo.id) {
          this.isFlying = false
          clearInterval(this.checkingIntervalId)
        }
      }, 300)

      console.assert(posInfo, '没有找到点击的区域所对应的点位数据')
      window.player.flyToPano({
        // 移动到点位
        pano: window.player.model.panos.index[posInfo.id],
        // 移动视角
        quaternion: new window.THREE.Quaternion(
          posInfo.x,
          posInfo.y,
          posInfo.z,
          posInfo.w
        ),
      })
    }
  }
}
</script>

<style lang="less" scoped>
.big-map {
  position: fixed;
  background-color: rgba(21, 52, 115, 0.80);
  backdrop-filter: blur(1.8vw);
  z-index: 10005;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  > button.close {
    position: absolute;
    top: 4.4vw;
    right: 4.4vw;
    width: 9vw;
    height: 9vw;
    z-index: 10001;
    > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  > .map-wrapper {
    position: absolute;
    top: 16vw;
    left: 5.5vw;
    right: 5.5vw;
    height: 89.2vw;
    > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    > .area {
      background: rgba(255,255,255,0.6);
      box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.2);
      font-size: 1.8vw;
      color: #1F3E7C;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      text-align: center;
      hyphens: auto;
    }
  }
  > .button-wrapper {
    position: absolute;
    top: calc(16vw + 89.2vw + 4vw);
    bottom: 0;
    left: 4.2vw;
    right: 1vw;
    overflow: auto;
    > button {
      margin-right: 1.9vw;
      margin-bottom: 4.4vw;
      width: 45vw;
      height: 8vw;
      border-radius: 4vw;
      border: 1px solid #FFFFFF;
      background: transparent;
      font-size: 3.2vw;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
}
</style>