40 changed files with 1286 additions and 1120 deletions
-
1package.json
-
BINsrc/assets/fonts/DingTalk_JinBuTi_Regular.ttf
-
7src/assets/fonts/fonts.css
-
BINsrc/assets/images/database-middle.png
-
BINsrc/assets/images/header-bg.png
-
BINsrc/assets/images/header-bg2.png
-
BINsrc/assets/images/header_03.png
-
BINsrc/assets/images/header_05.png
-
BINsrc/assets/images/header_07.png
-
BINsrc/assets/images/header_13.png
-
BINsrc/assets/images/header_13_b.png
-
BINsrc/assets/images/map-bg.png
-
BINsrc/assets/images/page4_02.png
-
BINsrc/assets/images/page4_03.png
-
BINsrc/assets/images/page4_06.png
-
BINsrc/assets/images/poster.png
-
116src/assets/styles/ball-running-animate.css
-
4src/assets/styles/font-some.css
-
547src/assets/styles/index.scss
-
35src/components/echart/barEcharts.vue
-
37src/components/echart/lineChartService.vue
-
8src/router/index.js
-
136src/views/accessToLibrary/index.vue
-
33src/views/header/index.vue
-
99src/views/index.vue
-
102src/views/lengingRanking/index.vue
-
91src/views/map/index.vue
-
181src/views/newBookRecommend/index.vue
-
73src/views/notice/index.vue
-
210src/views/pageFour/index.vue
-
289src/views/pageFour/module/video.vue
-
0src/views/pageOne/data.json
-
55src/views/pageOne/index.vue
-
25src/views/pageThree/index.vue
-
38src/views/pageThree/module/todayCircle.vue
-
21src/views/pageThree/module/yearCircle.vue
-
74src/views/readStar/index.vue
-
51src/views/todayBorrowed/index.vue
-
91src/views/totalLending/index.vue
-
64src/views/video/index.vue
|
After Width: 466 | Height: 512 | Size: 418 KiB |
|
Before Width: 1446 | Height: 100 | Size: 85 KiB After Width: 1451 | Height: 85 | Size: 72 KiB |
|
After Width: 1446 | Height: 100 | Size: 85 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 11 | Height: 6 | Size: 1.1 KiB |
|
After Width: 64 | Height: 5 | Size: 1.3 KiB |
|
After Width: 196 | Height: 6 | Size: 1.5 KiB |
|
Before Width: 554 | Height: 760 | Size: 443 KiB |
|
After Width: 1265 | Height: 3 | Size: 1.1 KiB |
|
After Width: 1330 | Height: 871 | Size: 28 KiB |
|
After Width: 467 | Height: 170 | Size: 53 KiB |
|
After Width: 1261 | Height: 710 | Size: 525 KiB |
@ -1,116 +0,0 @@ |
|||||
.ball-running-dots { |
|
||||
position: absolute; |
|
||||
top: 0.2rem; |
|
||||
} |
|
||||
.left-dots { |
|
||||
left: 136px; |
|
||||
} |
|
||||
.right-dots { |
|
||||
right: 200px; |
|
||||
} |
|
||||
.ball-running-dots > div { |
|
||||
position: relative; |
|
||||
-webkit-box-sizing: border-box; |
|
||||
-moz-box-sizing: border-box; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
.ball-running-dots { |
|
||||
display: block; |
|
||||
font-size: 0; |
|
||||
color: #316fd9; |
|
||||
} |
|
||||
.ball-running-dots > div { |
|
||||
display: inline-block; |
|
||||
float: none; |
|
||||
background-color: currentColor; |
|
||||
border: 0 solid currentColor; |
|
||||
} |
|
||||
.ball-running-dots { |
|
||||
width: 16px; |
|
||||
height: 16px; |
|
||||
} |
|
||||
.ball-running-dots > div { |
|
||||
position: absolute; |
|
||||
margin-left: 30px; |
|
||||
border-radius: 100%; |
|
||||
} |
|
||||
.left-dots > div { |
|
||||
animation: ball-running-dots-animate 2s linear infinite; |
|
||||
} |
|
||||
.right-dots > div { |
|
||||
animation: ball-running-dots-animate2 2s linear infinite; |
|
||||
} |
|
||||
.ball-running-dots > div:nth-child(1) { |
|
||||
animation-delay: 0s; |
|
||||
} |
|
||||
.ball-running-dots > div:nth-child(2) { |
|
||||
animation-delay: -0.8s; |
|
||||
} |
|
||||
.ball-running-dots > div:nth-child(3) { |
|
||||
animation-delay: -1.2s; |
|
||||
} |
|
||||
.ball-running-dots > div:nth-child(4) { |
|
||||
animation-delay: -1.6s; |
|
||||
} |
|
||||
@keyframes ball-running-dots-animate { |
|
||||
0%{ |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(0) translateX(-500%) scale(-.1); |
|
||||
opacity: 0.5; |
|
||||
} |
|
||||
80% { |
|
||||
transform: translateY(0) translateX(0); |
|
||||
} |
|
||||
85% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(-125%) translateX(0); |
|
||||
} |
|
||||
90% { |
|
||||
width: 200%; |
|
||||
height: 75%; |
|
||||
} |
|
||||
95% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(-100%) translateX(-500%); |
|
||||
} |
|
||||
100% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(0) translateX(-500%); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
@keyframes ball-running-dots-animate2 { |
|
||||
0%{ |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(0) translateX(500%) scale(-.1); |
|
||||
opacity: 0.5; |
|
||||
} |
|
||||
80% { |
|
||||
transform: translateY(0) translateX(0); |
|
||||
} |
|
||||
85% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(-125%) translateX(0); |
|
||||
} |
|
||||
90% { |
|
||||
width: 200%; |
|
||||
height: 75%; |
|
||||
} |
|
||||
95% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(-100%) translateX(500%); |
|
||||
} |
|
||||
100% { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform: translateY(0) translateX(500%); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
@ -1,136 +0,0 @@ |
|||||
<template> |
|
||||
<div class="accessToLib-container"> |
|
||||
<div class="accessToLib-item"> |
|
||||
<span>总进馆人数</span> |
|
||||
<count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" /> |
|
||||
</div> |
|
||||
<div v-if="!isSelfService" class="accessToLib-item"> |
|
||||
<span>月进馆人数</span> |
|
||||
<count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" /> |
|
||||
</div> |
|
||||
<div class="accessToLib-item"> |
|
||||
<span>今日进馆人数</span> |
|
||||
<count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" /> |
|
||||
</div> |
|
||||
<div v-if="isSelfService" class="accessToLib-item"> |
|
||||
<span>今日出馆人数</span> |
|
||||
<count-to :start-val="0" :end-val="dayOutNum" :duration="3200" class="panel-num" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitIntoNum } from '@/api/library' |
|
||||
import CountTo from 'vue-count-to' |
|
||||
|
|
||||
export default { |
|
||||
name: 'AccessToLibrary', |
|
||||
components: { |
|
||||
CountTo |
|
||||
}, |
|
||||
props: { |
|
||||
isSelfService: { |
|
||||
type: Boolean, |
|
||||
default: function() { |
|
||||
return false |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
timer: null, |
|
||||
dayNum: 0, |
|
||||
dayOutNum: 0, |
|
||||
monthNum: 0, |
|
||||
totalNum: 0, |
|
||||
otherDoorOther: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// 获取数据 |
|
||||
this.getInitIntoNum() |
|
||||
}, |
|
||||
mounted() { |
|
||||
// 每15秒获取一次 |
|
||||
this.timer = setInterval(() => { |
|
||||
this.getInitIntoNum() |
|
||||
}, 15000) |
|
||||
}, |
|
||||
beforeDestroy() { |
|
||||
// 销毁定时器 |
|
||||
this.$once('hook:beforeDestroy', () => { |
|
||||
clearInterval(this.timer) |
|
||||
}) |
|
||||
}, |
|
||||
methods: { |
|
||||
getInitIntoNum() { |
|
||||
// this.otherDoorOther = window.location.href.split('?')[1]?.split('=')[1] |
|
||||
const currentURL = window.location.href |
|
||||
console.log(currentURL) |
|
||||
if (currentURL.indexOf('?') !== -1) { |
|
||||
const query = currentURL.split('?')[1] |
|
||||
console.log(query) |
|
||||
console.log(query.indexOf('startTime')) |
|
||||
if (query.indexOf('startTime') !== -1 || query.indexOf('endTime') !== -1) { |
|
||||
const paramsUrl = query.split('&') |
|
||||
console.log(paramsUrl) |
|
||||
let startTimeIndex = -1 |
|
||||
for (let i = 0; i < paramsUrl.length; i++) { |
|
||||
const [key] = paramsUrl[i].split('=') |
|
||||
if (key === 'startTime' || key === 'endTime') { |
|
||||
startTimeIndex = i |
|
||||
break |
|
||||
} |
|
||||
} |
|
||||
// 去除 startTime 参数及其后面的参数 |
|
||||
const filteredParams = startTimeIndex >= 0 ? paramsUrl.slice(0, startTimeIndex) : params |
|
||||
const newQueryString = filteredParams.join('&') |
|
||||
this.otherDoorOther = newQueryString.split('=')[1] |
|
||||
} else { |
|
||||
this.otherDoorOther = query.split('=')[1] |
|
||||
} |
|
||||
} else { |
|
||||
this.otherDoorOther = null |
|
||||
} |
|
||||
|
|
||||
const startTime = this.$route.query.startTime |
|
||||
const endTime = this.$route.query.endTime |
|
||||
|
|
||||
if (this.otherDoorOther && this.otherDoorOther !== '' && this.otherDoorOther.indexOf('&')) { |
|
||||
this.otherDoorOther = this.otherDoorOther.replace(/\&/g, '、') |
|
||||
} else { |
|
||||
this.otherDoorOther = null |
|
||||
} |
|
||||
|
|
||||
let params |
|
||||
if (!this.isSelfService) { |
|
||||
params = { |
|
||||
doorCodes: this.otherDoorOther, |
|
||||
startTime: startTime, |
|
||||
endTime: endTime |
|
||||
} |
|
||||
} else { |
|
||||
params = { |
|
||||
doorCodes: 'D001', |
|
||||
startTime: startTime, |
|
||||
endTime: endTime |
|
||||
} |
|
||||
} |
|
||||
FetchInitIntoNum(params).then((res) => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.dayNum = res.data.dayPeopleNum |
|
||||
this.monthNum = res.data.monthPeopleNum |
|
||||
this.totalNum = res.data.historyPeopleNum |
|
||||
this.dayOutNum = res.data.dayOutNUm |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,102 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 借阅排行榜 --> |
|
||||
<div class="screen-item lending-ranking"> |
|
||||
<div class="common-title">借阅排行榜</div> |
|
||||
<vue-seamless-scroll |
|
||||
ref="listData" |
|
||||
:data="rankingList" |
|
||||
:class-option="defaultOption" |
|
||||
class="big-module module-content" |
|
||||
> |
|
||||
<div |
|
||||
v-for="(item, index) in rankingList" |
|
||||
:key="index" |
|
||||
class="book-list-item" |
|
||||
> |
|
||||
<div class="book-img"> |
|
||||
<img :src="item.cover" :onerror="defaultImg"> |
|
||||
</div> |
|
||||
<div class="book-info"> |
|
||||
<h4 class="title-item">{{ item.bookName }}</h4> |
|
||||
<p>{{ item.author }}</p> |
|
||||
</div> |
|
||||
<div class="ranking-num"> |
|
||||
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no1" /> |
|
||||
</svg> |
|
||||
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no21" /> |
|
||||
</svg> |
|
||||
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no3" /> |
|
||||
</svg> |
|
||||
<p>NO.{{ index + 1 }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</vue-seamless-scroll> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchBorrowRank, FetchCoverByISBN } from '@/api/library' |
|
||||
|
|
||||
export default { |
|
||||
name: 'LengingRanking', |
|
||||
data() { |
|
||||
return { |
|
||||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
||||
rankingList: [] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
defaultOption() { |
|
||||
return { |
|
||||
step: 1.1, // 滚动的速度 |
|
||||
hoverStop: false, // 是否开启鼠标悬停stop |
|
||||
singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|
||||
openWatch: true, |
|
||||
waitTime: 2000 // 单步运动停止的时间(默认值1000ms) |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getBorrowRank() |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getBorrowRank() { |
|
||||
FetchBorrowRank().then((res) => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.rankingList = res.data |
|
||||
this.rankingList.forEach(item => { |
|
||||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
getCoverByISBN(isbn, item) { |
|
||||
const params = { |
|
||||
isbn: isbn |
|
||||
} |
|
||||
FetchCoverByISBN(params).then((res) => { |
|
||||
console.log('RES', res) |
|
||||
if (res) { |
|
||||
// item.cover = window.URL.createObjectURL(res) |
|
||||
item.cover = res |
|
||||
} else { |
|
||||
item.cover = '' |
|
||||
} |
|
||||
console.log(item.cover) |
|
||||
this.$refs.listData.reset() |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import '~@/assets/styles/index.scss'; |
|
||||
</style> |
|
||||
@ -1,181 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 新书推荐 --> |
|
||||
<div class="screen-item lending-ranking"> |
|
||||
<div class="common-title">图书推荐</div> |
|
||||
<div ref="newbook" class="big-module module-content"> |
|
||||
<swiper v-if="rankingList.length > 1" ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs"> |
|
||||
<swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1"> |
|
||||
<div class="newbook-list-item"> |
|
||||
<div class="book-img"> |
|
||||
<img :src="item.cover" :onerror="defaultImg"> |
|
||||
</div> |
|
||||
<div class="book-info"> |
|
||||
<h4 class="title-item">{{ item.nbName }}</h4> |
|
||||
<p>{{ item.nbAuthor }}</p> |
|
||||
</div> |
|
||||
<!-- <div class="ranking-num"> |
|
||||
<svg v-if="index === 0" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no1" /> |
|
||||
</svg> |
|
||||
<svg v-if="index === 1" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no21" /> |
|
||||
</svg> |
|
||||
<svg v-if="index === 2" class="icon" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-no3" /> |
|
||||
</svg> |
|
||||
<p>NO.{{ index+1 }}</p> |
|
||||
</div> --> |
|
||||
</div> |
|
||||
</swiper-slide> |
|
||||
</swiper> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchNewBookRecommend, FetchCoverByISBN } from '@/api/library' |
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
||||
import 'swiper/dist/css/swiper.css' |
|
||||
// import data from './data.json' |
|
||||
export default { |
|
||||
name: 'NewBookRecommend', |
|
||||
components: { |
|
||||
swiper, |
|
||||
swiperSlide |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
||||
rankingList: [], |
|
||||
swiperOptionThumbs: { |
|
||||
loopedSlides: 6, |
|
||||
direction: 'vertical', |
|
||||
slidesPerView: 6, |
|
||||
slidesPerGroup: 6, |
|
||||
slidesPerColumn: 2, |
|
||||
autoplay: true |
|
||||
// centeredSlides: true, |
|
||||
// autoScrollOffset: true |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
swiper() { |
|
||||
return this.$refs.swiperThumbs.swiper |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
// this.rankingList = data |
|
||||
this.getNewBookRecommend() |
|
||||
}, |
|
||||
methods: { |
|
||||
getNewBookRecommend() { |
|
||||
const params = { |
|
||||
libcode: this.libcode, |
|
||||
pageNo: 1, |
|
||||
pageSize: 100 |
|
||||
} |
|
||||
FetchNewBookRecommend(params).then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
let data = [] |
|
||||
data = res.data.newbookList |
|
||||
data.forEach(item => { |
|
||||
this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item) |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
getCoverByISBN(isbn, item) { |
|
||||
const params = { |
|
||||
isbn: isbn |
|
||||
} |
|
||||
FetchCoverByISBN(params).then((res) => { |
|
||||
console.log(res) |
|
||||
// item.cover = window.URL.createObjectURL(res) |
|
||||
if (res) { |
|
||||
// item.cover = window.URL.createObjectURL(res) |
|
||||
item.cover = res |
|
||||
} else { |
|
||||
item.cover = '' |
|
||||
} |
|
||||
this.rankingList.push(item) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
// .screen-main .lending-ranking .module-content{ |
|
||||
// padding: 0 .25rem !important; |
|
||||
// } |
|
||||
.swiper-container{ |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
height: 6rem !important; |
|
||||
margin: .4rem 0; |
|
||||
overflow: hidden; |
|
||||
.swiper-wrapper{ |
|
||||
// display: flex; |
|
||||
// flex-wrap: wrap; |
|
||||
// flex-direction: row !important; |
|
||||
// justify-content: flex-start; |
|
||||
|
|
||||
} |
|
||||
&.gallery-thumbs { |
|
||||
// margin: 0.4rem 0; |
|
||||
} |
|
||||
&.gallery-thumbs .swiper-slide { |
|
||||
width: calc(100% / 3); |
|
||||
height: 2.8rem !important; |
|
||||
// padding: .1rem 0 0 0; |
|
||||
margin-top: 0.1rem; |
|
||||
margin-bottom: 0.1rem; |
|
||||
} |
|
||||
// &.gallery-thumbs .swiper-slide-active { |
|
||||
// // background-color: #09194B; |
|
||||
// } |
|
||||
} |
|
||||
|
|
||||
.newbook-list-item{ |
|
||||
.book-img{ |
|
||||
width: 1.325rem; |
|
||||
height: 1.775rem; |
|
||||
background: url('~@/assets/images/default-img.png') no-repeat center center; |
|
||||
background-size: contain; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
overflow: hidden; |
|
||||
margin: 0 auto 0.25rem auto; |
|
||||
img{ |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
// height: 100%; |
|
||||
} |
|
||||
} |
|
||||
.book-info{ |
|
||||
h4{ |
|
||||
font-size: 0.25rem; |
|
||||
line-height: .3rem; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
p{ |
|
||||
font-size: 0.2rem; |
|
||||
display: -webkit-box; |
|
||||
-webkit-box-orient: vertical; |
|
||||
-webkit-line-clamp: 1; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,73 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 通知公告 --> |
|
||||
<div class="screen-item notice"> |
|
||||
<div class="common-title">通知公告</div> |
|
||||
<div class="small-module module-content"> |
|
||||
<span class="notice-icon-gif" /> |
|
||||
<div class="seamless-warp"> |
|
||||
<div class="notice-txt" v-html="content" /> |
|
||||
</div> |
|
||||
<!-- <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp"> |
|
||||
<p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p> |
|
||||
</vue-seamless-scroll> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitNotice } from '@/api/library' |
|
||||
export default { |
|
||||
name: 'Notice', |
|
||||
data() { |
|
||||
return { |
|
||||
noticeData: [], |
|
||||
content: '' |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
defaultOption() { |
|
||||
return { |
|
||||
step: 0.3, // 数值越大速度滚动越快 |
|
||||
limitMoveNum: 1, // 开始无缝滚动的数据量 |
|
||||
hoverStop: false, // 是否开启鼠标悬停stop |
|
||||
direction: 1, // 0向下 1向上 2向左 3向右 |
|
||||
openWatch: true // 开启数据实时监控刷新dom |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getInitNotice() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 处理方法 |
|
||||
escapeHtml(str) { |
|
||||
var arrEntities = { |
|
||||
'lt': '<', |
|
||||
'gt': '>', |
|
||||
'nbsp': ' ', |
|
||||
'amp': '&', |
|
||||
'quot': '"' |
|
||||
} |
|
||||
return str.replace(/&(lt|gt|nbsp|amp|quot|pre);/ig, function(all, t) { |
|
||||
return arrEntities[t] |
|
||||
}) |
|
||||
}, |
|
||||
getInitNotice() { |
|
||||
FetchInitNotice().then((res) => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.content = this.escapeHtml(res.data) |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,210 @@ |
|||||
|
<template> |
||||
|
<div class="page-wrapper page-four-wrapper"> |
||||
|
<div class="page-four"> |
||||
|
<div class="four-video"> |
||||
|
<h4>{{ slideData[videoIndex].title }}</h4> |
||||
|
<el-carousel |
||||
|
ref="carousel" |
||||
|
height="710px" |
||||
|
indicator-position="none" |
||||
|
:autoplay="false" |
||||
|
:autoplay-hover-pause="true" |
||||
|
@change="carouselChange" |
||||
|
> |
||||
|
<div v-if="slideData && slideData.length > 0"> |
||||
|
<el-carousel-item v-for="(item, index) in slideData" :key="index"> |
||||
|
<video |
||||
|
ref="videos" |
||||
|
class="tsgz-video" |
||||
|
width="100%" |
||||
|
height="100%" |
||||
|
controls="controls" |
||||
|
:src="item.videoSrc" |
||||
|
:poster="poster" |
||||
|
autoplay |
||||
|
type="video/mp4" |
||||
|
muted |
||||
|
@ended="playNextVideo(index)" |
||||
|
> |
||||
|
您的浏览器不支持 video 标签。 |
||||
|
</video> |
||||
|
</el-carousel-item> |
||||
|
</div> |
||||
|
<el-empty |
||||
|
v-else |
||||
|
description="暂无视频" |
||||
|
style="height: 710px" |
||||
|
:image-size="40" |
||||
|
image="" |
||||
|
/> |
||||
|
</el-carousel> |
||||
|
</div> |
||||
|
<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 class="seamless-warp"> |
||||
|
<div ref="marquee" class="notice-text" :style="{ top: position + 'px' }" v-html="content" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="four-ranking lending-ranking"> |
||||
|
<div class="database-title">图书借阅排行榜</div> |
||||
|
<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> |
||||
|
</ul> |
||||
|
<ul class="ranking-list"> |
||||
|
<li v-for="(item,index) in rankingWithPercentage" :key="index"> |
||||
|
<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;"> |
||||
|
<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> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="four-contact"> |
||||
|
<div class="wechat-img"> |
||||
|
二维码 |
||||
|
</div> |
||||
|
<span>扫一扫关注我们</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PageFour', |
||||
|
data() { |
||||
|
return { |
||||
|
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') }] |
||||
|
}, |
||||
|
{ |
||||
|
title: '第三个视频', |
||||
|
videoSrc: require('@/assets/video/20220414085212.mp4') |
||||
|
// videos: [{ video: require('@/assets/video/20220414085212.mp4') }] |
||||
|
} |
||||
|
], |
||||
|
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() |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.rankingDataComputed() |
||||
|
this.startScrolling() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 通知滚动 |
||||
|
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 |
||||
|
} |
||||
|
}, 40) |
||||
|
}, |
||||
|
stopScrolling() { |
||||
|
if (this.timer) { |
||||
|
clearInterval(this.timer) |
||||
|
} |
||||
|
}, |
||||
|
carouselChange(index) { |
||||
|
const videos = this.$refs.videos |
||||
|
this.videoIndex = index |
||||
|
videos.forEach((video) => { |
||||
|
video.currentTime = 0 // 将视频回到起始时间 |
||||
|
video.pause() // 暂停视频播放 |
||||
|
}) |
||||
|
videos[index].play() |
||||
|
}, |
||||
|
playNextVideo(index) { |
||||
|
const videos = this.$refs.videos |
||||
|
let nextIndex = index |
||||
|
this.videoIndex = nextIndex |
||||
|
if (index < this.slideData.length - 1) { |
||||
|
nextIndex = nextIndex + 1 |
||||
|
} else { |
||||
|
nextIndex = 0 |
||||
|
} |
||||
|
|
||||
|
const carousel = this.$refs.carousel |
||||
|
carousel.setActiveItem(nextIndex) |
||||
|
const nextVideo = videos[nextIndex] |
||||
|
videos.forEach((video) => { |
||||
|
video.pause() |
||||
|
video.currentTime = 0 |
||||
|
}) |
||||
|
console.log('this.videoIndex.length ', this.videoIndex) |
||||
|
console.log('this.slideData.length ', this.slideData.length) |
||||
|
if (this.videoIndex === this.slideData.length - 1) { |
||||
|
this.$parent.autoPagination(0) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
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 } |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.el-carousel{ |
||||
|
margin-top: 0.475rem; |
||||
|
} |
||||
|
video { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,289 @@ |
|||||
|
<template> |
||||
|
<div id="carousel"> |
||||
|
<h4>{{ slideData[beginValue].title }}</h4> |
||||
|
<div |
||||
|
ref="carousel" |
||||
|
class="carousel" |
||||
|
:style="{ height: height + 'px' }" |
||||
|
> |
||||
|
<transition-group tag="ul" class="slide clearfix" :name="transitionName"> |
||||
|
<li |
||||
|
v-for="(item, index) in slideData" |
||||
|
v-show="index == beginValue" |
||||
|
:key="index" |
||||
|
:style="{ height: height + 'px' }" |
||||
|
style="display: flex" |
||||
|
> |
||||
|
<!-- 播放视频 --> |
||||
|
<div v-for="(v, e) in item.videos" :key="e" class="videos"> |
||||
|
<video |
||||
|
ref="videoPlay" |
||||
|
muted="" |
||||
|
:src="v.video" |
||||
|
controls="controls" |
||||
|
:autoplay="autoPlay" |
||||
|
loop="loop" |
||||
|
style="width: 100%; height: 100%" |
||||
|
@timeupdate="handleTimeUpdate" |
||||
|
/> |
||||
|
</div> |
||||
|
<!-- <div class="up" @click="up"> < </div> |
||||
|
<div class="next" @click="next"> ></div> --> |
||||
|
</li> |
||||
|
</transition-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import 'videojs-contrib-hls' |
||||
|
export default { |
||||
|
name: 'Carousel', |
||||
|
props: { |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 710 |
||||
|
}, |
||||
|
dot: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
arrow: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
interval: { |
||||
|
type: Number, |
||||
|
default: 5000 |
||||
|
}, |
||||
|
begin: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
slideData: { |
||||
|
type: Array, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
setInterval: '', |
||||
|
beginValue: 0, |
||||
|
transitionName: 'slide', |
||||
|
mytime_02: true, |
||||
|
videoDuration: 0, |
||||
|
currentTime: 0 |
||||
|
} |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 组件销毁前,清除监听器 |
||||
|
clearInterval(this.setInterval) |
||||
|
}, |
||||
|
mounted() { |
||||
|
// var box = this.$refs.carousel; //监听对象 |
||||
|
// box.addEventListener("mouseover", () => { |
||||
|
// this.mouseOver(); |
||||
|
// }); |
||||
|
// box.addEventListener("mouseout", () => { |
||||
|
// this.mouseOut(); |
||||
|
// }); |
||||
|
this.beginValue = this.begin |
||||
|
this.play() |
||||
|
}, |
||||
|
methods: { |
||||
|
handleTimeUpdate(e) { |
||||
|
this.currentTime = parseInt(e.target.currentTime) |
||||
|
this.videoDuration = Math.floor(e.target.duration) |
||||
|
if (!this.mytime_02) { |
||||
|
return |
||||
|
} // 首次进入能执行 |
||||
|
this.mytime_02 = false |
||||
|
setTimeout(() => { |
||||
|
console.log('currentTime', this.currentTime) |
||||
|
console.log('e.target.duration', this.videoDuration) |
||||
|
if (this.currentTime === this.videoDuration) { |
||||
|
this.next() |
||||
|
} |
||||
|
this.mytime_02 = true // 上次执行成功，下一次才可执行。 |
||||
|
}, 1000) |
||||
|
}, |
||||
|
// 改变前后 |
||||
|
change(key) { |
||||
|
if (key > this.slideData.length - 1) { |
||||
|
key = 0 |
||||
|
} |
||||
|
if (key < 0) { |
||||
|
key = this.slideData.length - 1 |
||||
|
} |
||||
|
this.beginValue = key |
||||
|
}, |
||||
|
autoPlay() { |
||||
|
this.transitionName = 'slide' |
||||
|
this.beginValue++ |
||||
|
console.log('this.beginValue', this.beginValue) |
||||
|
if (this.beginValue >= this.slideData.length) { |
||||
|
this.beginValue = 0 |
||||
|
return |
||||
|
} |
||||
|
}, |
||||
|
play() { |
||||
|
// this.setInterval = setInterval(this.autoPlay, this.interval); |
||||
|
this.autoPlay |
||||
|
}, |
||||
|
mouseOver() { |
||||
|
// 鼠标进入 |
||||
|
// console.log('over') |
||||
|
// clearInterval(this.setInterval); |
||||
|
}, |
||||
|
mouseOut() { |
||||
|
// 鼠标离开 |
||||
|
// console.log('out') |
||||
|
// this.play(); |
||||
|
}, |
||||
|
up() { |
||||
|
// 上一页 |
||||
|
--this.beginValue |
||||
|
this.transitionName = 'slideBack' |
||||
|
this.change(this.beginValue) |
||||
|
}, |
||||
|
next() { |
||||
|
console.log('next', this.beginValue) |
||||
|
// 下一页 |
||||
|
++this.beginValue |
||||
|
console.log('next2', this.beginValue) |
||||
|
this.transitionName = 'slide' |
||||
|
this.change(this.beginValue) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
.slide { |
||||
|
position: relative; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
height: 8.875rem; |
||||
|
margin-top: 0.475rem; |
||||
|
} |
||||
|
.slide li { |
||||
|
list-style: none; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 8.875rem; |
||||
|
} |
||||
|
.slide li img { |
||||
|
height: 8.875rem; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.slide li .title { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
padding: 10px 20px; |
||||
|
width: 100%; |
||||
|
background: rgba(0, 0, 0, 0.35); |
||||
|
color: #fff; |
||||
|
font-size: larger; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.videos { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.videos:nth-child(1) { |
||||
|
margin-right: 0.2rem; |
||||
|
} |
||||
|
|
||||
|
.slideDot { |
||||
|
position: absolute; |
||||
|
z-index: 999; |
||||
|
bottom: 0.2rem; |
||||
|
right: 1.85rem; |
||||
|
} |
||||
|
.slideDot span { |
||||
|
display: inline-block; |
||||
|
width: 0.07rem; |
||||
|
height: 0.07rem; |
||||
|
background: rgba(255, 255, 255, 0.65); |
||||
|
margin-left: 0.05rem; |
||||
|
} |
||||
|
.slideDot span.active { |
||||
|
background: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
.up, |
||||
|
.next { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
margin-top: 0; |
||||
|
cursor: pointer; |
||||
|
font-size: 50px; |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: 50% 50%; |
||||
|
} |
||||
|
.up { |
||||
|
left: 0.25rem; |
||||
|
} |
||||
|
.next { |
||||
|
left: auto; |
||||
|
right: 0.25rem; |
||||
|
} |
||||
|
/* .up:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
} */ |
||||
|
/* .next:hover { |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
} */ |
||||
|
|
||||
|
/*进入过渡生效时的状态*/ |
||||
|
.slide-enter-active { |
||||
|
transform: translateX(0); |
||||
|
transition: all 1s ease; |
||||
|
} |
||||
|
|
||||
|
/*进入开始状态*/ |
||||
|
.slide-enter { |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
|
||||
|
/*离开过渡生效时的状态*/ |
||||
|
.slide-leave-active { |
||||
|
transform: translateX(100%); |
||||
|
transition: all 1s ease; |
||||
|
} |
||||
|
|
||||
|
/*离开过渡的开始状态*/ |
||||
|
.slide-leave { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
|
||||
|
/*进入过渡生效时的状态*/ |
||||
|
.slideBack-enter-active { |
||||
|
transform: translateX(0); |
||||
|
transition: all 1s ease; |
||||
|
} |
||||
|
|
||||
|
/*进入开始状态*/ |
||||
|
.slideBack-enter { |
||||
|
transform: translateX(100%); |
||||
|
} |
||||
|
|
||||
|
/*离开过渡生效时的状态*/ |
||||
|
.slideBack-leave-active { |
||||
|
transform: translateX(-100%); |
||||
|
transition: all 1s ease; |
||||
|
} |
||||
|
|
||||
|
/*离开过渡的开始状态*/ |
||||
|
.slideBack-leave { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
</style> |
||||
@ -1,74 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 新书推荐 --> |
|
||||
<div class="screen-item read-star"> |
|
||||
<div class="common-title">阅读之星</div> |
|
||||
<div ref="starList" class="medium-module module-content"> |
|
||||
<div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]"> |
|
||||
<svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-1" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-21" /> |
|
||||
</svg> |
|
||||
<svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true"> |
|
||||
<use xlink:href="#icon-a-3" /> |
|
||||
</svg> |
|
||||
<span v-else class="star-num">{{ index+1 }}</span> |
|
||||
<p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p> |
|
||||
<p class="star-date">{{ mondayDate }}</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchBorrowStar } from '@/api/library' |
|
||||
import { parseTime } from '@/utils/index.js' |
|
||||
export default { |
|
||||
name: 'ReadStar', |
|
||||
data() { |
|
||||
return { |
|
||||
readstarList: [], |
|
||||
mondayDate: null |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getBorrowStar() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 获取list |
|
||||
getBorrowStar() { |
|
||||
FetchBorrowStar().then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
console.log(res) |
|
||||
this.readstarList = res.data |
|
||||
this.getMondayTime() |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// 获取本周一 |
|
||||
getMondayTime() { |
|
||||
const today = new Date() |
|
||||
const year = today.getFullYear() |
|
||||
const month = today.getMonth() + 1 |
|
||||
const day = today.getDate() |
|
||||
const newDate = new Date(year + '-' + month + '-' + day + ' 00:00:00') |
|
||||
|
|
||||
const nowTime = newDate.getTime() |
|
||||
const weekDay = newDate.getDay() |
|
||||
const oneDayTime = 24 * 60 * 60 * 1000 |
|
||||
|
|
||||
const mondayTime = (1 - weekDay) * oneDayTime + nowTime |
|
||||
this.mondayDate = parseTime(mondayTime, '{y}-{m}-{d}') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,51 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 今日图书借还 --> |
|
||||
<div class="screen-item total-lending"> |
|
||||
<div class="common-title">今日图书借还</div> |
|
||||
<div class="small-module module-content"> |
|
||||
<div class="chart-wrapper" style="height: calc(100%);"> |
|
||||
<LineChartService :chart-data="chartData" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import LineChartService from '@/components/echart/lineChartService' |
|
||||
import { FetchHalfYearBRNum } from '@/api/library' |
|
||||
export default { |
|
||||
name: 'TodayBorrowed', |
|
||||
components: { |
|
||||
LineChartService |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
chartData: { |
|
||||
returnData: [], |
|
||||
borrowedData: [] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getHalfYearBRNum() |
|
||||
}, |
|
||||
methods: { |
|
||||
getHalfYearBRNum() { |
|
||||
FetchHalfYearBRNum().then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.chartData.borrowedData = res.data.borrow |
|
||||
this.chartData.returnData = res.data.return |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
</style> |
|
||||
@ -1,91 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 总借阅量 --> |
|
||||
<div class="screen-item total-lending"> |
|
||||
<div class="common-title">总借阅量</div> |
|
||||
<div class="small-module module-content"> |
|
||||
<div class="chartNum"> |
|
||||
<div id="TNum" class="box-items"> |
|
||||
<li v-for="(item,index) in chartNum" :key="index" class="number-item"> |
|
||||
<span><i ref="numberItem" class="item">0123456789</i></span> |
|
||||
</li> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="chart-wrapper" style="height: calc(100% - 68px);"> |
|
||||
<LineChart :chart-data="chartData" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import LineChart from '@/components/echart/lineChart' |
|
||||
import { FetchHalfYearBorrowNum } from '@/api/library' |
|
||||
|
|
||||
export default { |
|
||||
name: 'TotalLending', |
|
||||
components: { |
|
||||
LineChart |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
totalLendData: null, |
|
||||
chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0'], |
|
||||
chartData: { |
|
||||
totalLendMonth: [], |
|
||||
totalLendData: [] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getHalfYearBorrowNum() |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getHalfYearBorrowNum() { |
|
||||
const params = { |
|
||||
ip: null |
|
||||
} |
|
||||
FetchHalfYearBorrowNum(params).then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.totalLendData = res.data.total |
|
||||
this.chartData.totalLendMonth = res.data.list.map(item => { |
|
||||
return item.date |
|
||||
}) |
|
||||
this.chartData.totalLendData = res.data.list.map(item => { |
|
||||
return item.total |
|
||||
}) |
|
||||
this.toOrderNum(this.totalLendData) |
|
||||
this.setNumberTransform() |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
toOrderNum(num) { |
|
||||
num = num.toString() |
|
||||
if (num.length < 9) { |
|
||||
num = '0' + num |
|
||||
this.toOrderNum(num) |
|
||||
} else if (num.length === 9) { |
|
||||
this.chartNum = num.split('') |
|
||||
} else { |
|
||||
console.log('借阅数据总数显示异常') |
|
||||
} |
|
||||
}, |
|
||||
setNumberTransform() { |
|
||||
var numberItems = document.getElementsByClassName('item') |
|
||||
const numberArr = this.chartNum.filter(item => !isNaN(item)) |
|
||||
for (var index = 0; index < numberItems.length; index++) { |
|
||||
const elem = numberItems[index] |
|
||||
elem.style.transform = 'translate(-50%, -' + numberArr[index] * 10 + '%)' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
@import "~@/assets/styles/font-some.css"; |
|
||||
</style> |
|
||||
@ -1,64 +0,0 @@ |
|||||
<template> |
|
||||
<div class="video-box"> |
|
||||
<video v-if="srcList[0].endsWith('.mp4')" width="100%" height="100%" controls loop autoplay muted :poster="poster"> |
|
||||
<source :src="srcList[0]" type="video/mp4"> |
|
||||
</video> |
|
||||
<el-carousel v-if="!srcList[0].endsWith('.mp4')" :interval="6000"> |
|
||||
<el-carousel-item v-for="src in srcList" :key="src"> |
|
||||
<img width="100%" height="100%" :src="src"> |
|
||||
</el-carousel-item> |
|
||||
</el-carousel> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchShowFileList } from '@/api/library' |
|
||||
export default { |
|
||||
name: 'Video', |
|
||||
components: { |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg', |
|
||||
srcList: [''] |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.getShowFile() |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
getShowFile() { |
|
||||
const params = { |
|
||||
libcode: '1201' |
|
||||
} |
|
||||
// this.src = 'D://uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
|
||||
|
|
||||
FetchShowFileList(params).then(res => { |
|
||||
if (res.errCode === 0) { |
|
||||
// this.src = res.data[0].filePath.replace('D://', 'http://172.16.0.23:8888/') |
|
||||
this.srcList = res.data.map(x => x.filePath.replace('D://', 'http://172.22.0.23:8888/')) |
|
||||
// this.srcList = res.data.map(x => x.filePath.replace('D://uploadFile', 'http://localhost:8080/static/')) |
|
||||
// console.log(22222, this.srcList) |
|
||||
// this.src = 'D://uploadFile/11503339-b829-4357-8379-d2b49106431f.mp4'.replace('D://', 'http://127.0.0.1:8888/') |
|
||||
// this.src = 'http://127.0.0.1:8888/uploadFile/9f904de6-0f5e-498e-8e5d-b7e14ea15496.mp4' |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
.el-carousel__container { |
|
||||
position: relative; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.el-carousel.el-carousel--horizontal { |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue