|
|
|
@ -2,7 +2,8 @@ |
|
|
|
<div class="page-wrapper page-four-wrapper"> |
|
|
|
<div class="page-four"> |
|
|
|
<div class="four-video"> |
|
|
|
<h4>{{ slideData[videoIndex].title }}</h4> |
|
|
|
<!-- {{ slideData[videoIndex].title }} --> |
|
|
|
<h4>宣传视频</h4> |
|
|
|
<el-carousel |
|
|
|
ref="carousel" |
|
|
|
height="710px" |
|
|
|
@ -20,7 +21,7 @@ |
|
|
|
width="100%" |
|
|
|
height="100%" |
|
|
|
controls="controls" |
|
|
|
:src="item.videoSrc" |
|
|
|
:src="item.cover" |
|
|
|
:poster="poster" |
|
|
|
autoplay |
|
|
|
type="video/mp4" |
|
|
|
@ -43,12 +44,19 @@ |
|
|
|
<div class="four-right"> |
|
|
|
<div class="four-notice"> |
|
|
|
<div class="database-title">重要通知</div> |
|
|
|
<!-- <div class="notice-text"> |
|
|
|
<p>本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!</p> |
|
|
|
<span>管理员 2020/08/12</span> |
|
|
|
</div> --> |
|
|
|
<!-- <div ref="marquee" class="notice-text" :style="{ top: position + 'px' }" v-html="content" /> --> |
|
|
|
<div class="seamless-warp"> |
|
|
|
<div ref="marquee" class="notice-text" :style="{ top: position + 'px' }" v-html="content" /> |
|
|
|
<swiper ref="mySwiper" :options="swiperOption" class="big-list"> |
|
|
|
<swiper-slide v-for="(item,index) in noticeList" :key="index"> |
|
|
|
<div class="notice-text"> |
|
|
|
<div class="notice-title"> |
|
|
|
<span>{{ item.title }}</span> <span>{{ item.startTime | parseTime('{y}-{m}-{d}') }}</span> |
|
|
|
</div> |
|
|
|
<div style="width: calc(100%); height: .5rem;" /> |
|
|
|
<p ref="marqueeItem + index" v-html="item.context" /> |
|
|
|
</div> |
|
|
|
</swiper-slide> |
|
|
|
</swiper> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="four-ranking lending-ranking"> |
|
|
|
@ -56,25 +64,25 @@ |
|
|
|
<div class="ranking-cont"> |
|
|
|
<ul class="ranking-title"> |
|
|
|
<li style="width: 0.725rem;">排名</li> |
|
|
|
<li style="width: 1.5rem; text-align: left;">图书馆名称</li> |
|
|
|
<li style="flex:1;" /> |
|
|
|
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li> |
|
|
|
<li style="flex:1; text-align: left;">题名</li> |
|
|
|
<!-- <li style="flex:1;" /> --> |
|
|
|
<li style="width: 1.5rem; padding-right: .25rem; text-align: right;">借阅数量</li> |
|
|
|
</ul> |
|
|
|
<ul class="ranking-list"> |
|
|
|
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }"> |
|
|
|
<li v-for="(item,index) in rankingData" :key="index" :class="{ 'hovered': index === currentHover }"> |
|
|
|
<div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div> |
|
|
|
<div style="width: 1.5rem; text-align: left;">{{ item.name }}</div> |
|
|
|
<div class="ranking-progress" style="flex:1; align-self: center;"> |
|
|
|
<div style="flex:1; text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;">{{ item.TITLE }}</div> |
|
|
|
<!-- <div class="ranking-progress" style="flex:1; align-self: center;"> |
|
|
|
<el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" /> |
|
|
|
</div> |
|
|
|
<div style="width: 1.25rem; padding-right: .25rem; text-align: right;">{{ item.num }}<i style="padding-left:.0625rem;">本</i></div> |
|
|
|
</div> --> |
|
|
|
<div style="width: 1.5rem; padding-right: .25rem; text-align: right;">{{ item.BOOKRECNO }}<i style="padding-left:.0625rem;">次</i></div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="four-contact"> |
|
|
|
<div class="wechat-img"> |
|
|
|
二维码 |
|
|
|
<img :src="wecharQrCodeSrc"> |
|
|
|
</div> |
|
|
|
<span>扫一扫关注我们</span> |
|
|
|
</div> |
|
|
|
@ -84,97 +92,168 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchTotalResource, FetchNoticeList, FetchSync36 } from '@/api/library' |
|
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
|
|
import 'swiper/dist/css/swiper.css' |
|
|
|
export default { |
|
|
|
name: 'PageFour', |
|
|
|
components: { |
|
|
|
swiper, |
|
|
|
swiperSlide |
|
|
|
}, |
|
|
|
data() { |
|
|
|
const _self = this |
|
|
|
return { |
|
|
|
wecharQrCodeSrc: null, |
|
|
|
currentHover: -1, |
|
|
|
content: '本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!', |
|
|
|
poster: require('@/assets/images/poster.png'), |
|
|
|
videoIndex: 0, |
|
|
|
slideData: [ |
|
|
|
{ |
|
|
|
title: '第一个视频', |
|
|
|
videoSrc: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') |
|
|
|
// videos: [{ video: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') }] |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '第二个视频', |
|
|
|
videoSrc: require('@/assets/video/1608277325000.mp4') |
|
|
|
// videos: [{ video: require('@/assets/video/1608277325000.mp4') }] |
|
|
|
slideData: [], |
|
|
|
rankingData: [], |
|
|
|
noticeList: [], |
|
|
|
noticeIndex: 0, |
|
|
|
swiperOption: { |
|
|
|
direction: 'vertical', |
|
|
|
autoHeight: true, |
|
|
|
observer: true, |
|
|
|
observeParents: true, |
|
|
|
autoplay: { |
|
|
|
delay: 16000, |
|
|
|
stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换 |
|
|
|
disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '第三个视频', |
|
|
|
videoSrc: require('@/assets/video/20220414085212.mp4') |
|
|
|
// videos: [{ video: require('@/assets/video/20220414085212.mp4') }] |
|
|
|
on: { |
|
|
|
slideChange: function() { |
|
|
|
// 获取当前index |
|
|
|
_self.noticeIndex = this.activeIndex |
|
|
|
console.log('当前index：' + _self.noticeIndex) |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
rankingData: [ |
|
|
|
{ id: 1, num: 718, name: '少儿图书馆' }, |
|
|
|
{ id: 2, num: 447, name: '大村店分馆' }, |
|
|
|
{ id: 3, num: 261, name: '邵家岭分馆' }, |
|
|
|
{ id: 4, num: 242, name: '复兴路分馆' }, |
|
|
|
{ id: 5, num: 165, name: '白竹湖分馆' }, |
|
|
|
{ id: 6, num: 140, name: '资源环境学院' } |
|
|
|
], |
|
|
|
rankingWithPercentage: [], |
|
|
|
timer: null, |
|
|
|
position: 0, |
|
|
|
speed: 2 // 滚动速度，可根据需要调整 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.stopScrolling() |
|
|
|
localStorage.setItem('videoIndex', this.videoIndex) |
|
|
|
localStorage.setItem('videoCurrentTime', this.$refs.videos[this.videoIndex].currentTime) |
|
|
|
localStorage.setItem('noticeIndex', this.noticeIndex) |
|
|
|
this.$refs.videos[this.videoIndex].pause() |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getVideoResource() |
|
|
|
this.getNotice() |
|
|
|
this.getBookRanking() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.rankingDataComputed() |
|
|
|
this.startScrolling() |
|
|
|
if (localStorage.getItem('videoIndex')) { |
|
|
|
this.videoIndex = parseInt(localStorage.getItem('videoIndex')) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.carousel.setActiveItem(this.videoIndex) |
|
|
|
const videos = this.$refs.videos |
|
|
|
const nextVideo = videos[this.videoIndex] |
|
|
|
videos.forEach((video) => { |
|
|
|
video.pause() |
|
|
|
video.currentTime = 0 |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0 |
|
|
|
nextVideo.play() |
|
|
|
}, 1000) |
|
|
|
if (this.slideData.length !== 0) { |
|
|
|
this.$refs.carousel.setActiveItem(this.videoIndex) |
|
|
|
const videos = this.$refs.videos |
|
|
|
console.log(videos) |
|
|
|
console.log(this.videoIndex) |
|
|
|
const nextVideo = videos[this.videoIndex] |
|
|
|
videos.forEach((video) => { |
|
|
|
video.pause() |
|
|
|
video.currentTime = 0 |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0 |
|
|
|
nextVideo.play() |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
if (localStorage.getItem('wecharQrCodeSrc')) { |
|
|
|
this.wecharQrCodeSrc = localStorage.getItem('wecharQrCodeSrc') |
|
|
|
} |
|
|
|
if (localStorage.getItem('noticeIndex')) { |
|
|
|
this.$nextTick(() => { |
|
|
|
const index = localStorage.getItem('noticeIndex') |
|
|
|
this.$refs.mySwiper.swiper.slideTo(index, 1000, true) |
|
|
|
}) |
|
|
|
} |
|
|
|
setInterval(() => { |
|
|
|
this.currentHover = (this.currentHover + 1) % this.rankingData.length |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 通知滚动 |
|
|
|
getNotice() { |
|
|
|
FetchNoticeList().then(res => { |
|
|
|
this.noticeList = res.data |
|
|
|
// this.noticeList.push({ |
|
|
|
// 'id': '4028e3c3909abc5f01909ac027440002', |
|
|
|
// 'title': '222', |
|
|
|
// 'context': '咨询电话：0746—3222340', |
|
|
|
// 'startTime': '2024-07-10T03:45:00.000+0000', |
|
|
|
// 'endTime': '2034-07-10T03:45:00.000+0000', |
|
|
|
// 'creater': 'f8ccafbb791cb89e017968aae4470000', |
|
|
|
// 'createTime': '2024-07-10T03:46:42.513+0000', |
|
|
|
// 'updater': 'f8ccafbb791cb89e017968aae4470000', |
|
|
|
// 'updateTime': '2024-07-10T03:46:42.513+0000' |
|
|
|
// }) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.noticeList.forEach((item, index) => { |
|
|
|
this.$refs['marqueeItem' + index] = this.$el.querySelectorAll('.notice-text p')[index] |
|
|
|
}) |
|
|
|
this.startScrolling() |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error('Error', error) |
|
|
|
}) |
|
|
|
}, |
|
|
|
startScrolling() { |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.position -= this.speed |
|
|
|
// 当文字完全滚出容器时，重置位置 |
|
|
|
const containerHeight = document.getElementsByClassName('seamless-warp')[0].offsetHeight |
|
|
|
const contentHeight = this.$refs.marquee.offsetHeight |
|
|
|
if (contentHeight <= containerHeight) { |
|
|
|
this.position = 20 |
|
|
|
} else if (Math.abs(this.position) >= contentHeight) { |
|
|
|
this.position = containerHeight |
|
|
|
this.noticeList.forEach((item, index) => { |
|
|
|
const containerHeight = this.$el.querySelector('.seamless-warp').offsetHeight |
|
|
|
const contentHeight = this.$refs['marqueeItem' + index].offsetHeight |
|
|
|
|
|
|
|
// 设置 CSS 变量 --container-height，以便在 CSS 中使用 |
|
|
|
this.$refs['marqueeItem' + index].parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`) |
|
|
|
|
|
|
|
if (contentHeight > containerHeight) { |
|
|
|
this.$refs['marqueeItem' + index].classList.add('scroll-animation') |
|
|
|
} else { |
|
|
|
this.$refs['marqueeItem' + index].classList.remove('scroll-animation') |
|
|
|
} |
|
|
|
}, 40) |
|
|
|
}) |
|
|
|
}, |
|
|
|
stopScrolling() { |
|
|
|
if (this.timer) { |
|
|
|
clearInterval(this.timer) |
|
|
|
localStorage.setItem('videoIndex', this.videoIndex) |
|
|
|
localStorage.setItem('videoCurrentTime', this.$refs.videos[this.videoIndex].currentTime) |
|
|
|
this.$refs.videos[this.videoIndex].pause() |
|
|
|
} |
|
|
|
// 视频资源 |
|
|
|
getVideoResource() { |
|
|
|
FetchTotalResource().then(res => { |
|
|
|
const result = JSON.parse(res.data) |
|
|
|
const linkSrc = process.env.VUE_APP_BASE_API |
|
|
|
this.slideData = result.map((item, index) => { |
|
|
|
if (item.filePath) { |
|
|
|
item.cover = linkSrc + '/downloadFile' + item.filePath |
|
|
|
} else { |
|
|
|
// 网络地址请求 http://8.130.135.212:19000/MarcByIsbn?sIsbn=9787545559804 |
|
|
|
// axios.get('http://8.130.135.212:19000/MarcByIsbn?sIsbn=' + item.isbn) |
|
|
|
// .then(response => { |
|
|
|
// console.log(response) |
|
|
|
// }) |
|
|
|
// .catch(error => { |
|
|
|
// console.error('There was an error!', error) |
|
|
|
// }) |
|
|
|
} |
|
|
|
return item |
|
|
|
}) |
|
|
|
// this.slideData.push({ |
|
|
|
// title: '第一个视频', |
|
|
|
// cover: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') |
|
|
|
// // videos: [{ video: require('@/assets/video/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4') }] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: '第二个视频', |
|
|
|
// cover: require('@/assets/video/1608277325000.mp4') |
|
|
|
// // videos: [{ video: require('@/assets/video/1608277325000.mp4') }] |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// title: '第三个视频', |
|
|
|
// cover: require('@/assets/video/20220414085212.mp4') |
|
|
|
// // videos: [{ video: require('@/assets/video/20220414085212.mp4') }] |
|
|
|
// }) |
|
|
|
}).catch(error => { |
|
|
|
console.error('Error', error) |
|
|
|
}) |
|
|
|
}, |
|
|
|
setActiveItem(index) { |
|
|
|
this.$refs.carousel.setActiveItem(index) |
|
|
|
@ -190,6 +269,7 @@ export default { |
|
|
|
}, |
|
|
|
playNextVideo(index) { |
|
|
|
const videos = this.$refs.videos |
|
|
|
console.log('videos', videos) |
|
|
|
let nextIndex = index |
|
|
|
this.videoIndex = nextIndex |
|
|
|
if (index < this.slideData.length - 1) { |
|
|
|
@ -212,11 +292,25 @@ export default { |
|
|
|
nextVideo.play() |
|
|
|
}, 1000) |
|
|
|
}, |
|
|
|
rankingDataComputed() { |
|
|
|
const firstPlaceNum = this.rankingData[0].num |
|
|
|
this.rankingWithPercentage = this.rankingData.map(item => { |
|
|
|
const percentage = (item.num / firstPlaceNum) * 100 |
|
|
|
return { ...item, percentage } |
|
|
|
getBookRanking() { |
|
|
|
const params = { |
|
|
|
'libcode': 'QYTSG', |
|
|
|
'starttime': this.getFormattedDate(new Date(), -1), |
|
|
|
'endtime': this.getFormattedDate(new Date()), |
|
|
|
'rownum': 6 |
|
|
|
} |
|
|
|
FetchSync36(params).then(res => { |
|
|
|
const result = JSON.parse(res.data) |
|
|
|
if (result.success && result.resultlist.length > 0) { |
|
|
|
this.rankingData = result.resultlist |
|
|
|
setInterval(() => { |
|
|
|
this.currentHover = (this.currentHover + 1) % this.rankingData.length |
|
|
|
}, 1000) |
|
|
|
} else { |
|
|
|
throw new Error('Failed' + libcode) |
|
|
|
} |
|
|
|
}).catch(error => { |
|
|
|
console.error('Error', error) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -232,4 +326,20 @@ video { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.big-list>.swiper-wrapper>.swiper-slide { |
|
|
|
height: 100vh; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-container-vertical .swiper-wrapper{ |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
.swiper-container { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.in-list .swiper-slide { |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
</style> |
