lg_frontend/pages/visual/PeakCoalView.vue

<template>
  <div class="peak-coal-content">
    <div class="container">
      <div class="header-content">
        <p>峰煤焦化超低排放"管控治"</p>
        <p class="suntitle">一体化平台</p>
      </div>

      <div class="body-content">
        <!--      左侧内容-->
        <div class="left-content">
          <div class="left-data-panel">
            <a-row :gutter="24">
              <a-col :span="12">
                <air-quality/>
              </a-col>
              <a-col :span="12">
                <pollutant-trends/>
              </a-col>
              <a-col :span="24">
                <overview-pollutants/>
              </a-col>
              <a-col :span="24">
                <check-data/>
              </a-col>
            </a-row>
          </div>
        </div>

        <!--      中间内容-->
        <div class="center-content">
          <Map />
          <img class="center-bg" :src="centerBg" />
        </div>
        <!--      右侧内容-->
        <div class="right-content">
          <div class="right-data-panel">
            <a-row :gutter="24">
              <a-col :span="12">
                <energy-use/>
              </a-col>
              <a-col :span="12">
                <enterprise-operations/>
              </a-col>
              <a-col :span="24">
                <device-run/>
              </a-col>
              <a-col :span="12">
                <warning-statistics/>
              </a-col>
              <a-col :span="12">
                <latest-warning/>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>

      <div class="footer-content">
        <div class="video-btn footer-btn">重点监控</div>
        <div class="map-filter footer-btn" @click="showFilter = !showFilter">
          图例
        </div>
        <div class="filters" v-show="showFilter">
          <div class="search"></div>
          <div class="filter-box">
            <div @click="selectItem(item)" class="filter-item" v-for="item in mapFilters" :key="item.id" :class="{ selected: item.selected }">
              <span>{{ item.label }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="left-icon" />

      <div class="right-icon" />
    </div>

<!--    <Map />-->

  </div>
</template>

<script>
import mapFilters from "@/config/mapFilters";
const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
export default {
  name: "PeakCoalView",
  components: {},
  data() {
    return {
      autoStyle: {},
      centerBg,
      showFilter: false,
      mapFilters
    }
  },
  mounted() {
    this.$log.info('test')
    this.$log.error('test')
    this.$log.trace('test')
    this.$log.info('test')
    this.$log.warn('test')
    this.getAutoStyle()
    window.addEventListener('resize', (e) => {
      e.stopPropagation()
      this.getAutoStyle()
    }, false)
  },
  methods: {
    getAutoStyle() {
      const {scale, origin} = this.getScale()
      this.autoStyle = {
        transform: `scale(${scale})`,
        transformOrigin: origin
      }
    },
    getScale() {
      let scale = 1
      let origin = 'top center'
      const baseWidth = 9450
      const baseHeight = 3000
      const innerWidth = window.innerWidth
      const innerHeight = window.innerHeight
      const widthScale = innerWidth / baseWidth
      const scaleHeight = baseHeight * widthScale
      if (scaleHeight <= innerHeight) {
        origin = 'left top'
        scale = widthScale
        if (scale > 1) {
          origin = 'left top'
        }
      } else {
        scale = innerHeight / baseHeight
      }
      return {scale, origin}
    },
    selectItem (item) {
      item.selected = !item.selected
      this.$evBus.$emit('setVisibility',  item.id, item.selected)
    }
  }
}
</script>
<style>
body, html, #__nuxt, #__layout {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-enter, .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px);
}
</style>
<style scoped lang="less">
@import "assets/styles/mixin";

.peak-coal-content {
  height: 3000px;
  width: 9450px;
  overflow: hidden;
  position: relative;
  user-select: none;
  .point-none {
    pointer-events: none;
  }
  .point {
    pointer-events: auto;
  }
  .container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
  }

  .header-content {
    position: absolute;
    top: 0px;
    height: 507px;
    width: 100%;
    .bg("~/assets/peakCoalImages/header/first-title-bg.png");
    z-index: 2;
    font-family: AlimamaShuHeiTi-Bold;
    font-size: 116.67px;
    color: #D8F0FF;
    letter-spacing: 7.68px;
    text-align: center;
    text-shadow: 0 0 11px #000000;
    font-weight: 700;
    line-height: 148px;
    padding-top: 110px;
    > p {
      margin: 0;
    }
    .suntitle {
      font-size: 80px;
      line-height: 100px;
    }

  }
  .body-content {
    position: absolute;
    height: 100%;
    width: 100%;

    .left-content {
      position: absolute;
      left: 0px;
      top: 136px;
      width: 2935px;
      height: 2721px;
      .bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px);
      padding: 300px 476px 100px 412px;
      perspective: 1000px;
      .left-data-panel {
        height: 100%;
        width: 100%;
        transform: rotateY(2deg)  ;
        transform-origin: left center;
      }
    }

    .right-content {
      position: absolute;
      right: 0px;
      top: 136px;
      width: 2935px;
      height: 2721px;
      .bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px);
      padding: 300px 476px 100px 480px;
      perspective: 1000px;

      .right-data-panel {
        height: 100%;
        width: 100%;
        transform: rotateY(-2deg);
        transform-origin: right center;
      }
    }

    .center-content {
      position: absolute;
      left: 50%;
      top: 411px;
      transform: translateX(-50%);
      width: 4383px;
      height: 2628px;
      .center-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        pointer-events: none;
      }
    }
  }

  .footer-content {
    position: absolute;
    bottom: -44px;
    width: 100%;
    height: 220px;
    .bg("~/assets/peakCoalImages/footer/footer-bg.webp", center, center);
    z-index: 2;
    .footer-btn {
      cursor: pointer;
      position: absolute;
      top: 84px;
      font-family: AlimamaShuHeiTi-Bold;
      font-size: 50px;
      color: #D8F0FF;
      letter-spacing: 3.29px;
      text-shadow: 0 0 25px rgba(0,145,255,0.50);
      font-weight: 700;
      padding-left: 120px;
      &.map-filter {
        right: 3062px;
        background: url('~/assets/images/map/filter/导航-点位.png') left center no-repeat;
        background-size: 106px 111px;
      }

      &.video-btn {
        left: 3014px;
        background: url('~/assets/images/map/filter/导航-监控.png') left center no-repeat;
        background-size: 106px 111px;
      }
    }

    .filters {
      position: absolute;
      bottom: 240px;
      right: 1470px * 2;
      width: 528px;
      .search {
        height: 142px;
        background: rgba(20, 64, 114, 0.7);
        border: 1px solid rgba(31, 97, 173, 0.84);
      }

      .filter-box {
        margin-top: 20px;
        background: rgba(20, 64, 114, 0.7);
        border: 1px solid rgba(31, 97, 173, 0.84);
        padding: 0 40px 40px;
        box-sizing: border-box;
        .filter-item {
          font-family: MicrosoftYaHei;
          font-size: 38.89px;
          color: rgba(255, 255, 255, 0.55);
          letter-spacing: 2.56px;
          font-weight: 400;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 52px;
          line-height: 52px;
          margin-top: 40px;
          cursor: pointer;
          &.selected {
            color: #fff;
          }
        }
      }
    }
  }


  .left-icon {
    position: absolute;
    left: 0px;
    width: 531px;
    height: 100%;
    .bg("~/assets/peakCoalImages/left/left-icon.png", center, center);
  }

  .right-icon {
    position: absolute;
    right: 0px;
    width: 531px;
    height: 100%;
    .bg("~/assets/peakCoalImages/right/right-icon.png", center, center);
  }
}
</style>