qy_bigScreen/src/views/index.vue

<template>
  <div id="screen-container">
    <div v-if="isLoading" class="loading">
      <dv-loading>Loading...</dv-loading>
    </div>
    <Header :header-title="headerTitle" />
    <div class="header-page" @click="goToNextPage">{{ (currentPage+1) +' / '+ pageData.length }}</div>
    <section ref="sectionRef">
      <keep-alive>
        <PageOne v-if="currentPage === 0" ref="user" />
      </keep-alive>
      <Map v-if="currentPage === 1" />
      <PageThree v-if="currentPage === 2" />
      <PageFour v-if="currentPage === 3" />
    </section>
    <div class="bottom-bg">
      <div class="bottom-content">
        <div class="dot-container left-dots">
          <div class="dot" />
          <div class="dot" />
          <div class="dot" />
        </div>
        <div class="dot-container right-dots">
          <div class="dot" />
          <div class="dot" />
          <div class="dot" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/views/header/index.vue'
import PageOne from '@/views/pageOne/index.vue'
import Map from '@/views/map/index.vue'
import PageThree from '@/views/pageThree/index.vue'
import PageFour from '@/views/pageFour/index.vue'
export default {
  name: 'Home',
  components: {
    Header,
    PageOne,
    Map,
    PageThree,
    PageFour
  },
  data() {
    return {
      currentPage: 0,
      isLoading: false,
      height: '',
      headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览',
      pageData: [
        {
          id: 1, title: 'page1', delayed: 10
        },
        {
          id: 2, title: 'page2', delayed: 0
        },
        {
          id: 3, title: 'page3', delayed: 10
        },
        {
          id: 4, title: 'page4', delayed: 0
        }
      ],
      swiperOption: null,
      loadingTtimer: null,
      timer2: null,
      leftTimer: null,
      middleTimer: null,
      deviceTimer: null,
      todayTimer: null,
      yearTimer: null,
      intervalId: null // 用于存储定时器的ID
    }
  },
  computed: {
  },
  created() {
    // const METAWA = require('../assets/js/META.common.min.js')
    // const meta = new METAWA('665e845538d68')
    // meta.callback = (r) => {
    //   console.log(r, '回调')
    // }
    this.startAutoSwitch()
  },
  beforeDestroy() {
    clearInterval(this.timer2)
    this.stopAutoSwitch()
    // window.removeEventListener('resize', this.setElementHeight)
  },
  mounted() {
    this.showLoading()
    // this.setElementHeight()
    // window.addEventListener('resize', this.setElementHeight)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer2)
      // window.removeEventListener('resize', this.setElementHeight)
    })
  },
  methods: {
    startAutoSwitch() {
      this.intervalId = setInterval(() => {
        this.currentPage = (this.currentPage + 1) % 4
      }, 20000)
    },
    stopAutoSwitch() {
      clearInterval(this.intervalId)
    },
    goToNextPage() {
      this.currentPage = (this.currentPage + 1) % 4
      this.stopAutoSwitch() // 停止自动切换，以免与手动切换冲突

      if (this.currentPageIndex === 3) {
        this.autoplayVideo = false // 切换到视频页面时停止自动播放视频
      } else {
        this.autoplayVideo = true // 切换到其他页面时继续自动播放视频
      }

      // 设置定时器，恢复自动切换
      // setTimeout(() => {
      //   this.startAutoSwitch()
      // }, 200000)
    },
    autoPagination(page) {
      // this.currentPage = page
      console.log('page:', page)
      if (page > this.pageData.length) {
        page = 1
      }
      this.currentPage = page
      console.log('当前页:', this.currentPage)
      // if (this.currentPage === 1 || this.currentPage === 3) {
      //   clearInterval(this.timer2)
      //   this.timer2 = setInterval(() => {
      //     setTimeout(() => {
      //       this.autoPagination(this.currentPage + 1)
      //     }, 0)
      //   }, 8000)
      // }

      // if (this.currentPage >= this.pageData.length) {
      //   this.currentPage = 1
      // } else {
      //   this.currentPage = active + 1
      // }
      // console.log('changePage', this.active)

      // if (this.currentPage < this.pageData.length) {
      //   if (this.currentPage === 1 || this.currentPage === 3) {
      //     clearInterval(this.timer2)
      //     this.timer2 = setInterval(() => {
      //       setTimeout(() => {
      //         this.active = this.currentPage + 1
      //       }, 0)
      //     }, 10000)
      //   } else {
      //     this.active = this.currentPage + 1
      //   }
      // } else {
      //   this.active = 1
      // }
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer2)
        clearInterval(this.leftTimer)
        clearInterval(this.middleTimer)
        clearInterval(this.deviceTimer)
        clearInterval(this.todayTimer)
        clearInterval(this.yearTimer)
        this.middleTimer = null
        this.leftTimer = null
        this.deviceTimer = null
        this.todayTimer = null
        this.yearTimer = null
      })
    },
    showLoading() {
      this.isLoading = true
      this.loadingTtimer = setTimeout(() => {
        this.isLoading = false
        window.clearTimeout(this.loadingTtimer)
      }, 1500)
    },
    // 设置DOM高度
    setElementHeight() {
      clearTimeout(this.loadingTtimer)
      this.loadingTtimer = setTimeout(() => {
        this.showLoading()
        this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px`
      }, 100)
    },
    // 数字3位数加分隔符
    formatter(str) {
      const reg = /(?=(?!\b)(\d{3})+$)/g
      return str.toString().replace(reg, ',')
    },
    // 设置文字滚动
    setNumberTransform(item) {
      const numberItems = document.querySelectorAll(`.${item.id}  i`)
      // const numberItems = this.$refs[`${item.id}`]
      const numberArr = item.valueArr.filter(item => !isNaN(item))
      numberItems.forEach((t) => {
        t.style.transition = 'transform 0s ease-in-out'
        t.style.transform = `translateY(-0%)`
      })
      setTimeout(() => {
        numberItems.forEach((ls, index) => {
          ls.style.transition = 'transform 0.8s ease-in-out'
          ls.style.transform = `translateY(-${numberArr[index] * 10}%)`
        })
      }, 15)
    },
    // 定时
    initInterval(targetList, time) {
      const { setNumberTransform } = this
      return setInterval((function fn() {
        targetList.forEach(t => {
          setTimeout(() => {
            setNumberTransform(t)
          }, 50)
        })
        return fn
      })(), time)
    },
    // 定时刷新数字翻牌器
    timedRefresh(targetList, type) {
      if (type === 'middle') {
        this.middleTimer = this.initInterval2(targetList, 8000)
      } else if (type === 'left') {
        this.leftTimer = this.initInterval(targetList, 10000)
      } else if (type === 'device') {
        this.deviceTimer = this.initInterval(targetList, 8000)
      } else if (type === 'todayTotal') {
        this.todayTimer = this.initInterval(targetList, 8000)
      } else if (type === 'yearTotal') {
        this.yearTimer = this.initInterval(targetList, 10000)
      }
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.leftTimer)
        clearInterval(this.middleTimer)
        clearInterval(this.deviceTimer)
        clearInterval(this.todayTimer)
        clearInterval(this.yearTimer)
        this.middleTimer = null
        this.leftTimer = null
        this.deviceTimer = null
        this.todayTimer = null
        this.yearTimer = null
      })
    },
    setNumberTransform2(item) {
      var numberItems = document.querySelectorAll(`.${item.id}  i`)
      const numberArr = item.valueArr.filter(item => !isNaN(item))
      for (var index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transition = 'transform 0s ease-in-out'
        elem.style.transform = `translate(-50%,-0%)`
      }
      setTimeout(() => {
        for (var index = 0; index < numberItems.length; index++) {
          const elem = numberItems[index]
          elem.style.transition = 'transform 1s ease-in-out'
          elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)'
        }
      }, 15)
    },
    // 定时
    initInterval2(targetList, time) {
      const { setNumberTransform2 } = this
      return setInterval((function fn() {
        targetList.forEach(t => {
          setTimeout(() => {
            setNumberTransform2(t)
          }, 50)
        })
        return fn
      })(), time)
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/index.scss";
.swiper-home{
  .swiper-wrapper{
    transition-timing-function: ease-in-out !important;
  }
  .swiper-slide{
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .swiper-pagination-home{
    position: fixed;
    top: .2rem;
    left: calc( 100% - 2rem);
    font-size: .4rem;
  }
}

</style>