|
|
@ -4,23 +4,29 @@ |
|
|
<dv-loading>Loading...</dv-loading> |
|
|
<dv-loading>Loading...</dv-loading> |
|
|
</div> |
|
|
</div> |
|
|
<Header :header-title="headerTitle" /> |
|
|
<Header :header-title="headerTitle" /> |
|
|
<div style="position: fixed; right: .175rem; top:.3125rem; font-size:.175rem; background: rgba(82,146,255,0.2);border: 1px solid #5292FF; padding: 0 .075rem; line-height: .3125rem; z-index: 999;">{{ active +' / '+ pageData.length }}</div> |
|
|
|
|
|
|
|
|
<div class="header-page" @click="goToNextPage">{{ (currentPage+1) +' / '+ pageData.length }}</div> |
|
|
<section ref="sectionRef"> |
|
|
<section ref="sectionRef"> |
|
|
<keep-alive> |
|
|
<keep-alive> |
|
|
<PageOne |
|
|
|
|
|
v-if="active === 1" |
|
|
|
|
|
ref="user" |
|
|
|
|
|
:height="height" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<PageOne v-if="currentPage === 0" ref="user" /> |
|
|
</keep-alive> |
|
|
</keep-alive> |
|
|
<Map |
|
|
|
|
|
v-if="active === 2" |
|
|
|
|
|
:height="height" |
|
|
|
|
|
/> |
|
|
|
|
|
<PageThree v-if="active === 3" /> |
|
|
|
|
|
<PageFour v-if="active === 4" /> |
|
|
|
|
|
|
|
|
<Map v-if="currentPage === 1" /> |
|
|
|
|
|
<PageThree v-if="currentPage === 2" /> |
|
|
|
|
|
<PageFour v-if="currentPage === 3" /> |
|
|
</section> |
|
|
</section> |
|
|
<div class="bottom-bg" /> |
|
|
|
|
|
|
|
|
<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> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -41,7 +47,8 @@ export default { |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
active: 4, |
|
|
|
|
|
|
|
|
active: 1, |
|
|
|
|
|
currentPage: 0, |
|
|
isLoading: false, |
|
|
isLoading: false, |
|
|
height: '', |
|
|
height: '', |
|
|
headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览', |
|
|
headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览', |
|
|
@ -66,7 +73,8 @@ export default { |
|
|
middleTimer: null, |
|
|
middleTimer: null, |
|
|
deviceTimer: null, |
|
|
deviceTimer: null, |
|
|
todayTimer: null, |
|
|
todayTimer: null, |
|
|
yearTimer: null |
|
|
|
|
|
|
|
|
yearTimer: null, |
|
|
|
|
|
intervalId: null // 用于存储定时器的ID |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@ -77,9 +85,11 @@ export default { |
|
|
// meta.callback = (r) => { |
|
|
// meta.callback = (r) => { |
|
|
// console.log(r, '回调') |
|
|
// console.log(r, '回调') |
|
|
// } |
|
|
// } |
|
|
|
|
|
this.startAutoSwitch() |
|
|
}, |
|
|
}, |
|
|
beforeDestroy() { |
|
|
beforeDestroy() { |
|
|
clearInterval(this.timer2) |
|
|
clearInterval(this.timer2) |
|
|
|
|
|
this.stopAutoSwitch() |
|
|
// window.removeEventListener('resize', this.setElementHeight) |
|
|
// window.removeEventListener('resize', this.setElementHeight) |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
@ -92,25 +102,74 @@ export default { |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
autoPagination(active) { |
|
|
|
|
|
console.log('active', active) |
|
|
|
|
|
if (active === 1 || active === 3) { |
|
|
|
|
|
clearInterval(this.timer2) |
|
|
|
|
|
this.timer2 = setInterval(() => { |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
// if (this.active >= this.pageData.length) { |
|
|
|
|
|
// this.active = 1 |
|
|
|
|
|
|
|
|
startAutoSwitch() { |
|
|
|
|
|
this.intervalId = setInterval(() => { |
|
|
|
|
|
this.currentPage = (this.currentPage + 1) % 4 |
|
|
|
|
|
}, 20000) |
|
|
|
|
|
}, |
|
|
|
|
|
stopAutoSwitch() { |
|
|
|
|
|
clearInterval(this.intervalId) |
|
|
|
|
|
}, |
|
|
|
|
|
goToNextPage() { |
|
|
|
|
|
this.currentPage = (this.currentPage + 1) % 4 |
|
|
|
|
|
this.stopAutoSwitch() // 停止自动切换，以免与手动切换冲突 |
|
|
|
|
|
|
|
|
|
|
|
// 设置定时器，恢复自动切换 |
|
|
|
|
|
// setTimeout(() => { |
|
|
|
|
|
// this.startAutoSwitch() |
|
|
|
|
|
// }, 200000) |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// goToNextPage() { |
|
|
|
|
|
// // 清除之前的计时器，以防多个计时器同时运行 |
|
|
|
|
|
// clearTimeout(this.timer) |
|
|
|
|
|
|
|
|
|
|
|
// // 执行页面跳转的逻辑 |
|
|
|
|
|
// this.autoPagination(this.currentPage + 1) |
|
|
|
|
|
|
|
|
|
|
|
// // 设置5秒后自动跳转 |
|
|
|
|
|
// this.timer = setTimeout(() => { |
|
|
|
|
|
// this.autoPagination(this.currentPage + 1) |
|
|
|
|
|
// }, 20000) |
|
|
|
|
|
// }, |
|
|
|
|
|
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 { |
|
|
// } else { |
|
|
// this.active = active + 1 |
|
|
|
|
|
|
|
|
// 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.active = active + 1 |
|
|
|
|
|
// this.showLoading() |
|
|
|
|
|
}, 0) |
|
|
|
|
|
}, 10000) |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log('this.active', this.active) |
|
|
|
|
|
this.active = active + 1 |
|
|
|
|
|
} |
|
|
|
|
|
this.$once('hook:beforeDestroy', () => { |
|
|
this.$once('hook:beforeDestroy', () => { |
|
|
clearInterval(this.timer2) |
|
|
clearInterval(this.timer2) |
|
|
clearInterval(this.leftTimer) |
|
|
clearInterval(this.leftTimer) |
|
|
|
