lg_frontend/pages/visual/PeakCoalView.vue

<template>
  <div class="peak-coal-content">
    <div class="container">
      <div class="header-content">
        <div class="text">
          <p>峰煤焦化超低排放"管控治"</p>
          <p class="suntitle">一体化平台</p>
        </div>
        <video class="video" loop muted autoplay src="/media/toubu.webm"></video>
      </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 @pointClick="pointClick" />
          <div class="container"></div>
          <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="div">

          <div class="video-btn footer-btn" @click="showCamera = !showCamera">重点监控</div>
          <div class="camera-list" v-if="showCamera">
            <div class="camera-itm">
              <div class="player"></div>
            </div>
            <div class="camera-itm">
              <div class="player"></div>
            </div>
            <div class="camera-itm">
              <div class="player"></div>
            </div>
            <div class="camera-itm">
              <div class="player"></div>
            </div>
          </div>
          <div class="map-filter footer-btn" @click="showFilter = !showFilter">
            图例
          </div>
          <div class="filters" v-show="showFilter">
            <div class="search">
              <a-auto-complete
                v-model="resourceSearchText"
                :data-source="resourceList"
                style="width: 100%;"
                placeholder="请输入关键字"
                @change="onChange"
                @select="onChange"
              >
                <a-input>
                  <a-icon :style="{ fontSize: '50px', color: '#37EAFF' }" slot="suffix" type="search" class="certain-category-icon" />
                </a-input>
              </a-auto-complete>
            </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>
        <video class="video" loop muted autoplay src="/media/footer.webm"></video>
      </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,
      // 资源搜索内容
      resourceSearchText: '',
      resourceList: [],
      showCamera: false
    }
  },
  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: {
    /**
     * 图层构造器
     * @param { object } props
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
     * @param { object } props.data 图层类型
     */
    pointClick ({ layerType, data }) {
      // todo
    },
    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)
    },
    onChange (text) {

    }
  }
}
</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%;
    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;
    .text {
      position: absolute;
      width: 100%;
      z-index: 1;
      top: 200px;
      > p {
        margin: 0;
      }
    }
    .video {
      height: 464px;
      width: 100%;
      object-fit: fill;
    }

    .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;
      z-index: 2;
      .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;
      z-index: 2;

      .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;
      z-index: 1;
      .container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -384px;
        height: 3000px;
        width: 9450px;
        .bg("~/assets/peakCoalImages/bg.png");
        z-index: 2;
        pointer-events: none;

      }
      .center-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        pointer-events: none;
      }
    }
  }

  .footer-content {
    position: absolute;
    bottom: -44px;
    width: 100%;
    height: 220px;
    z-index: 2;
    .div {
      position: absolute;
      width: 100%;
      z-index: 1;
    }
    .video {
      height: 220px;
      width: 100%;
      object-fit: fill;
    }
    .footer-btn {
      cursor: pointer;
      position: absolute;
      top: 66px;
      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;
      }
    }

    .camera-list {
      position: absolute;
      width: 2332px;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      height: 370px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .camera-itm {
        padding: 14px;
        box-sizing: border-box;
        height: 100%;
        width: 524px;
        background-image: linear-gradient(61deg, rgba(8,31,55,0.80) 0%, rgba(18,50,81,0.80) 100%);
        .player {
          background-color: #000;
          width: 100%;
          height: 100%;
        }
      }
    }

    .filters {
      position: absolute;
      bottom: 20px;
      right: 1470px * 2;
      width: 528px;
      .search {
        height: 142px;
        background: rgba(20, 64, 114, 0.7);
        border: 1px solid rgba(31, 97, 173, 0.84);
        ::v-deep {
          .ant-select-auto-complete.ant-select .ant-input {
            height: 142px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 50px;
            color: #37EAFF;
            letter-spacing: 0;
            line-height: 34.25px;
            font-weight: 700;
          }
          .ant-select-selection {
            background: transparent;
          }
          .ant-select-selection__rendered {
            line-height: 142px;
          }
        }
      }

      .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 {
    z-index: 2;
    position: absolute;
    left: 0px;
    width: 531px;
    height: 100%;
    .bg("~/assets/peakCoalImages/left/left-icon.png", center, center);
  }

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