You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
9.1 KiB
304 lines
9.1 KiB
<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>
|