電梯導航

效果圖：

點選導航可以跳轉到對應樓層，滑鼠滾輪聯動

<template>
  <div class="outBox">
    <div class="container" @scroll="handleScroll" ref="viewBox">
      <div class="zhjd-container-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>瀝青拌合站</el-breadcrumb-item>
          <el-breadcrumb-item>統計報表</el-breadcrumb-item>
          <el-breadcrumb-item>生產配比資料分析</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="report" v-loading="loading">
        <div class="title">瀝青混合料生產資料圖表統計</div>
        <el-row class="elevator" ref="buttonGroup">
          <el-button :style="{'background': btn.a ? '#fff':'#245DC6','color':btn.a ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.a" @click="handleClick('a')">產量統計</el-button>
          <el-button :style="{'background': btn.b ? '#fff':'#245DC6','color':btn.b ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.b" @click="handleClick('b')">產量統計報表</el-button>
          <el-button :style="{'background': btn.c ? '#fff':'#245DC6','color':btn.c ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.c" @click="handleClick('c')">生產質量報表</el-button>
          <el-button :style="{'background': btn.d ? '#fff':'#245DC6','color':btn.d ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.d" @click="handleClick('d')">油石比分佈</el-button>
          <el-button :style="{'background': btn.e ? '#fff':'#245DC6','color':btn.e ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.e" @click="handleClick('e')">油石比波動</el-button>
          <el-button :style="{'background': btn.f ? '#fff':'#245DC6','color':btn.f ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.f" @click="handleClick('f')">油石比分析</el-button>
          <el-button :style="{'background': btn.g ? '#fff':'#245DC6','color':btn.g ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.g" @click="handleClick('g')">溫度分佈</el-button>
          <el-button :style="{'background': btn.h ? '#fff':'#245DC6','color':btn.h ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.h" @click="handleClick('h')">溫度波動</el-button>
          <el-button :style="{'background': btn.i ? '#fff':'#245DC6','color':btn.i ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.i" @click="handleClick('i')">溫度分析</el-button>
          <el-button :style="{'background': btn.j ? '#fff':'#245DC6','color':btn.j ? '#245DC6':'#fff','borderColor': '#245DC6'}" class="buttonGroup" size="mini" :plain="btn.j" @click="handleClick('j')">熱料倉配比波動</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      btn: {
        a: false,
        b: true,
        c: true,
        d: true,
        e: true,
        f: true,
        g: true,
        h: true,
        i: true,
        j: true,
      },
      box: null,
    }
  },
  mounted () {
    this.zoom = 1 / this.$store.state.d2admin.zoomGlobal.zoom
    window.addEventListener("resize", () => {
      this.zoom = 1 / this.$store.state.d2admin.zoomGlobal.zoom
    })
    this.init()
  },
  methods: {
    init () {
      this.onSearch()
    },
    // 側邊欄點選修改stationId
    stationClick (index) {
      this.searchForm = {
        reportType: 'year',
        month: this.$moment().format('YYYY-MM'),
        year: this.$moment().format('YYYY'),
        weekday: this.$moment().format('YYYY-MM-DD')
      }
      this.stationIndex = index
      this.searchForm.stationId = this.sliderList[index].station.id
      this.onSearch()
    },
    // 按鈕點選事件
    btnClick (current) {
      let that = this
      that.btn = {
        a: true,
        b: true,
        c: true,
        d: true,
        e: true,
        f: true,
        g: true,
        h: true,
        i: true,
        j: true,
      }
      that.btn[current] = false

    },
    // 滾動事件處理函式
    handleScroll () {
      // 滾動的距離
      let scrollTop = this.$refs.viewBox.scrollTop
      // 獲取所有樓層的偽陣列
      const floor = document.querySelectorAll('.floor')
      floor.forEach((item, index) => {
        if (scrollTop >= (item.offsetTop - 470)) {
          let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
          this.btnClick(arr[index])
        }
      })
    },
    // 滾動到指定位置
    handleClick (current) {
      let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
      let index = arr.indexOf(current)
      const floor = document.querySelectorAll('.floor')
      const offsetTop = floor[index].offsetTop
      this.$refs.viewBox.scrollTo({
        top: offsetTop - 450,
        behavior: 'smooth'
      })
    },
};
</script>

<style scoped>
.elevator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0px;
  left: 0;
  background-color: #f5fafe;
  z-index: 999;
  height: 56px;
}
.buttonGroup {
  margin: 0 16px;
  font-size: 14px;
  height: 30px;
}
</style>