xuhuajiao
/
qy_bigScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

页面调试数据

master
xuhuajiao 7 months ago
parent
a7abc13ac5
commit
2aab7cf22e
11 changed files with 460 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/api/library.js
  2. 41
      src/assets/styles/index.scss
  3. 7
      src/main.js
  4. 8
      src/utils/index.js
  5. 10
      src/views/index.vue
  6. 37
      src/views/map/index.vue
  7. 254
      src/views/pageFour/index.vue
  8. 8
      src/views/pageOne/index.vue
  9. 159
      src/views/pageThree/index.vue
  10. 33
      src/views/pageThree/module/todayCircle.vue
  11. 33
      src/views/pageThree/module/yearCircle.vue

32
src/api/library.js
View File

@ -91,6 +91,33 @@ export function FetchReadRanking(params) {
}) })
} }
// page4 获取通知
export function FetchNoticeList(params) {
return request({
url: '/qyzt/getNoticeList' + '?' + qs.stringify(params, { indices: false }),
method: 'get',
urlType: 'local'
})
}
// page4 文献排行榜
export function FetchSync36(params) {
return request({
url: '/qyzt/sync36' + '?' + qs.stringify(params, { indices: false }),
method: 'get',
urlType: 'local'
})
}
// page4 获取总馆资料
export function FetchTotalResource(params) {
return request({
url: '/qyzt/getTotalResource' + '?' + qs.stringify(params, { indices: false }),
method: 'get',
urlType: 'local'
})
}
export default { export default {
FetchInitToken, FetchInitToken,
FetchLibBookTotal, FetchLibBookTotal,
@ -101,5 +128,8 @@ export default {
FetchHotSearch, FetchHotSearch,
FetchNewBook, FetchNewBook,
FetchReadRanking, FetchReadRanking,
FetchLibcodeDetails
FetchLibcodeDetails,
FetchNoticeList,
FetchSync36,
FetchTotalResource
} }

41
src/assets/styles/index.scss
View File

@ -1460,30 +1460,48 @@
margin-top: .125rem; margin-top: .125rem;
overflow: hidden; overflow: hidden;
.notice-text{ .notice-text{
position: absolute;
padding: .4125rem .375rem;
position: relative;
padding: 0 .375rem;
margin-bottom: .25rem;
font-size: .225rem; font-size: .225rem;
color: #ADC7FF; color: #ADC7FF;
line-height: .375rem; line-height: .375rem;
// height: 1.625rem;
text-indent: 2em;
font-weight: bold; font-weight: bold;
// animation: myMove 20s linear infinite;
// animation-fill-mode: forwards;
span{
display: block;
text-align: right;
.notice-title{
position: absolute;
left: 0;
top: 0;
z-index: 9999;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: calc(100%);
height: .5rem;
line-height: .5rem;
padding: 0 .375rem;
color: #7D93C2; color: #7D93C2;
font-size: .2rem; font-size: .2rem;
background-color: #011244;
span{
display: block;
}
}
p{
color: #fff;
text-indent: 2em;
}
} }
.scroll-animation {
animation: myMove 15s linear infinite;
animation-fill-mode: forwards;
} }
@keyframes myMove { @keyframes myMove {
0% { 0% {
transform: translateY(2rem);
transform: translateY(1rem);
} }
100% { 100% {
transform: translateY(-3rem);
transform: translateY(calc(-1 * var(--container-height)));
} }
} }
} }
@ -1534,6 +1552,7 @@
overflow: hidden; overflow: hidden;
img{ img{
display: block; display: block;
padding: .125rem;
width: 100%; width: 100%;
} }
} }

7
src/main.js
View File

@ -29,6 +29,13 @@ Vue.prototype.$message = Message
// Vue.prototype.libcode = 'FTZN' // Vue.prototype.libcode = 'FTZN'
Vue.prototype.libcode = '1201' Vue.prototype.libcode = '1201'
// 全局注册过滤 - 时间
import { parseTime, getFormattedDate } from '@/utils/index.js'
Vue.filter('parseTime', function(time, cFormat) {
return parseTime(time, cFormat)
})
Vue.prototype.getFormattedDate = getFormattedDate
import axios from 'axios' import axios from 'axios'
Vue.prototype.$axios = axios Vue.prototype.$axios = axios

8
src/utils/index.js
View File

@ -91,6 +91,14 @@ export function getCurrentTime() {
return time return time
} }
export function getFormattedDate(date, yearOffset = 0) {
date.setFullYear(date.getFullYear() + yearOffset)
const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0')
return `${year}-${month}-${day}`
}
export function isExternal(path) { export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path) return /^(https?:|mailto:|tel:)/.test(path)
} }

10
src/views/index.vue
View File

@ -55,7 +55,7 @@ export default {
}, },
data() { data() {
return { return {
currentIndex: 2, // 当前显示的页面索引
currentIndex: 1, // 当前显示的页面索引
currentPage: null, // 当前显示的页面数据 currentPage: null, // 当前显示的页面数据
isLoading: false, isLoading: false,
height: '', height: '',
@ -75,7 +75,8 @@ export default {
todayTimer: null, todayTimer: null,
yearTimer: null, yearTimer: null,
intervalId: null, intervalId: null,
orderIds: []
orderIds: [],
wecharQrCodeSrc: null
} }
}, },
computed: { computed: {
@ -100,7 +101,7 @@ export default {
// meta.callback = (r) => { // meta.callback = (r) => {
// console.log(r, '回调') // console.log(r, '回调')
// } // }
// this.getInitSetting()
this.getInitSetting()
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer2) clearInterval(this.timer2)
@ -145,9 +146,12 @@ export default {
// selectorder 显示的屏和顺序 1第一屏 2第二屏 // selectorder 显示的屏和顺序 1第一屏 2第二屏
// show1 第一屏显示时间 // show1 第一屏显示时间
// show2 第二屏显示时间 // show2 第二屏显示时间
const linkSrc = process.env.VUE_APP_BASE_API
FetchInitSetting().then(res => { FetchInitSetting().then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
console.log(result) console.log(result)
this.wecharQrCodeSrc = linkSrc + '/downloadFile' + result.wecharQrCode
localStorage.setItem('wecharQrCodeSrc', this.wecharQrCodeSrc)
const selectorder = result.selectorder const selectorder = result.selectorder
const showDurations = { 1: result.show1, 2: result.show2, 3: result.show3, 4: result.show4 } const showDurations = { 1: result.show1, 2: result.show2, 3: result.show3, 4: result.show4 }

37
src/views/map/index.vue
View File

@ -51,7 +51,7 @@
<div class="read-num"> <div class="read-num">
<div class="database-title">读者统计</div> <div class="database-title">读者统计</div>
<div class="online"> <div class="online">
<p>累计办证人数</p>
<p>本年累计办证人数</p>
<p class="num"><span>{{ cardTotal }}</span><i>人</i></p> <p class="num"><span>{{ cardTotal }}</span><i>人</i></p>
</div> </div>
<div class="lending-ranking"> <div class="lending-ranking">
@ -84,7 +84,6 @@
import { FetchLibBookTotal, FetchLibcodeDetails, FetchReadRanking, FetchLendingTotal } from '@/api/library' import { FetchLibBookTotal, FetchLibcodeDetails, FetchReadRanking, FetchLendingTotal } from '@/api/library'
import mapJson from '@/assets/json/qy.json' import mapJson from '@/assets/json/qy.json'
import libJson from '@/assets/json/lib2.json' import libJson from '@/assets/json/lib2.json'
// import libJsonData from '@/assets/json/lib.json'
import { debounce } from 'lodash' // js工具类,按需加载 import { debounce } from 'lodash' // js工具类,按需加载
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
@ -162,10 +161,11 @@ export default {
}, },
getReadRanking() { getReadRanking() {
const params = { const params = {
'libcode': 'QYTSG',
'starttime': '2000-01-01',
'endtime': '2034-01-01',
'rownum': 10
'libcode': 'QYTSG,SJLFG,FXLFG,SEDSG,BZHFG',
'starttime': this.getFormattedDate(new Date(), -1),
'endtime': this.getFormattedDate(new Date()),
'rownum': 10,
'nordtype': 0
} }
FetchReadRanking(params).then(res => { FetchReadRanking(params).then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
@ -194,19 +194,19 @@ export default {
} else if (item.RDNAME.length === 3) { } else if (item.RDNAME.length === 3) {
// 截取第一个和第三个字符 // 截取第一个和第三个字符
item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + item.RDNAME.substring(2, 3) item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + item.RDNAME.substring(2, 3)
} else if (item.name.length > 3) {
} else if (item.RDNAME.length > 3) {
// 截取第一个和大于第4个字符 // 截取第一个和大于第4个字符
item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + ' * ' + item.RDNAME.substring(3, item.name.length)
item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + ' * ' + item.RDNAME.substring(3, item.RDNAME.length)
} }
const percentage = (item.TOTALNUM / firstPlaceNum) * 100 const percentage = (item.TOTALNUM / firstPlaceNum) * 100
return { ...item, percentage } return { ...item, percentage }
}) })
}, },
// 累计借出
getLendingTotal() { getLendingTotal() {
FetchLendingTotal().then(res => { FetchLendingTotal().then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
if (result.success & result.resultlist.length !== 0) { if (result.success & result.resultlist.length !== 0) {
// BZL_YEAR 本年办证人数
this.cardTotal = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.BZL_YEAR, 0) this.cardTotal = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.BZL_YEAR, 0)
} else { } else {
this.cardTotal = 0 this.cardTotal = 0
@ -219,13 +219,13 @@ export default {
getLibBookTotal() { getLibBookTotal() {
const params = { const params = {
'libcode': 'LSJDFG,LJPFG,DCDFG,QYTSG,SJLFG,XMDFG,FXLFG,QLQFG,SEDSG,MZZFG,GYTZFG,KJSKCFG,JBTZFG,SKTZFG,XJZFG,PSZFG,DZQZFG,WXJDFG,CHJDFG,BSZFG,BZHFG', 'libcode': 'LSJDFG,LJPFG,DCDFG,QYTSG,SJLFG,XMDFG,FXLFG,QLQFG,SEDSG,MZZFG,GYTZFG,KJSKCFG,JBTZFG,SKTZFG,XJZFG,PSZFG,DZQZFG,WXJDFG,CHJDFG,BSZFG,BZHFG',
'starttime': '2000-01-01',
'endtime': '2034-01-01'
'starttime': this.getFormattedDate(new Date(), -1),
'endtime': this.getFormattedDate(new Date())
} }
FetchLibBookTotal(params).then(res => { FetchLibBookTotal(params).then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
console.log(result.resultlist)
if (result.success & result.resultlist.length !== 0) { if (result.success & result.resultlist.length !== 0) {
// 目的拿到馆藏量
this.libALLNum = result.resultlist this.libALLNum = result.resultlist
} else { } else {
this.libALLNum = [] this.libALLNum = []
@ -242,7 +242,7 @@ export default {
getLibcodeDetails() { getLibcodeDetails() {
FetchLibcodeDetails().then(res => { FetchLibcodeDetails().then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
console.log('result', result)
if (result.length !== 0) { if (result.length !== 0) {
const libCode = { const libCode = {
'QYTSG': [111.848657, 26.588519], 'QYTSG': [111.848657, 26.588519],
@ -267,7 +267,6 @@ export default {
'BSZFG': [111.989802, 26.421353], 'BSZFG': [111.989802, 26.421353],
'BZHFG': [111.862001, 26.580311] 'BZHFG': [111.862001, 26.580311]
} }
const updatedLibraries = result.map(library => { const updatedLibraries = result.map(library => {
const matchingData = this.libALLNum.find(item => item.LIBCODE === library.tcId) const matchingData = this.libALLNum.find(item => item.LIBCODE === library.tcId)
if (matchingData) { if (matchingData) {
@ -288,7 +287,6 @@ export default {
}).sort((a, b) => a.sort - b.sort) }).sort((a, b) => a.sort - b.sort)
this.libInfoData = updatedLibraries this.libInfoData = updatedLibraries
console.log(updatedLibraries) console.log(updatedLibraries)
if (localStorage.getItem('countItem')) { if (localStorage.getItem('countItem')) {
@ -296,6 +294,7 @@ export default {
} else { } else {
this.count = 0 this.count = 0
} }
if (this.libInfoData.length !== 0) {
this.initChart() // 初始化 this.initChart() // 初始化
setTimeout(() => { setTimeout(() => {
this.updateChart() // 更新数据，散点轮播显示 this.updateChart() // 更新数据，散点轮播显示
@ -305,6 +304,7 @@ export default {
if (document.getElementsByClassName('scroll-container')[0]) { if (document.getElementsByClassName('scroll-container')[0]) {
this.startScrolling() this.startScrolling()
} }
}
} else { } else {
this.libInfoData = [] this.libInfoData = []
} }
@ -319,7 +319,7 @@ export default {
var mapImg = document.createElement('img') var mapImg = document.createElement('img')
mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px' mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
mapImg.src = require('../../assets/images/map-bg2.png') mapImg.src = require('../../assets/images/map-bg2.png')
console.log('this.libInfoData', this.libInfoData)
var XAData = this.libInfoData.map(item => { var XAData = this.libInfoData.map(item => {
return [ return [
{ name: '陶铸图书馆' }, { name: '陶铸图书馆' },
@ -347,6 +347,7 @@ export default {
[ [
['陶铸图书馆', XAData] ['陶铸图书馆', XAData]
].forEach(function(item, i) { ].forEach(function(item, i) {
console.log('item', item[1])
series.push( series.push(
{ {
name: item[0], name: item[0],
@ -381,9 +382,10 @@ export default {
show: true show: true
}, },
data: item[1].map(function(dataItem) { data: item[1].map(function(dataItem) {
console.log('dataItem', dataItem)
return { return {
name: dataItem[1].name, name: dataItem[1].name,
value: libJson[dataItem[1].name].concat([dataItem[1].value]),
value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
place: dataItem[1].value place: dataItem[1].value
} }
}) })
@ -792,7 +794,6 @@ export default {
} }
return item return item
}) })
console.log('displayedImages', this.displayedImages)
this.currentIndex = 0 this.currentIndex = 0
this.swiperKey += 1 this.swiperKey += 1
if (this.displayedImages.length === 1) { if (this.displayedImages.length === 1) {

254
src/views/pageFour/index.vue
View File

@ -2,7 +2,8 @@
<div class="page-wrapper page-four-wrapper"> <div class="page-wrapper page-four-wrapper">
<div class="page-four"> <div class="page-four">
<div class="four-video"> <div class="four-video">
<h4>{{ slideData[videoIndex].title }}</h4>
<!-- {{ slideData[videoIndex].title }} -->
<h4>宣传视频</h4>
<el-carousel <el-carousel
ref="carousel" ref="carousel"
height="710px" height="710px"
@ -20,7 +21,7 @@
width="100%" width="100%"
height="100%" height="100%"
controls="controls" controls="controls"
:src="item.videoSrc"
:src="item.cover"
:poster="poster" :poster="poster"
autoplay autoplay
type="video/mp4" type="video/mp4"
@ -43,12 +44,19 @@
<div class="four-right"> <div class="four-right">
<div class="four-notice"> <div class="four-notice">
<div class="database-title">重要通知</div> <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 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> </div>
<div class="four-ranking lending-ranking"> <div class="four-ranking lending-ranking">
@ -56,25 +64,25 @@
<div class="ranking-cont"> <div class="ranking-cont">
<ul class="ranking-title"> <ul class="ranking-title">
<li style="width: 0.725rem;">排名</li> <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>
<ul class="ranking-list"> <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: 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" /> <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> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="four-contact"> <div class="four-contact">
<div class="wechat-img"> <div class="wechat-img">
二维码
<img :src="wecharQrCodeSrc">
</div> </div>
<span>扫一扫关注我们</span> <span>扫一扫关注我们</span>
</div> </div>
@ -84,60 +92,68 @@
</template> </template>
<script> <script>
import { FetchTotalResource, FetchNoticeList, FetchSync36 } from '@/api/library'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default { export default {
name: 'PageFour', name: 'PageFour',
components: {
swiper,
swiperSlide
},
data() { data() {
const _self = this
return { return {
wecharQrCodeSrc: null,
currentHover: -1, currentHover: -1,
content: '本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!本馆于2019年12月12日闭馆一天，请大家安排好入馆时间,谢谢!',
poster: require('@/assets/images/poster.png'), poster: require('@/assets/images/poster.png'),
videoIndex: 0, 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: { computed: {
}, },
beforeDestroy() { 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() { created() {
this.getVideoResource()
this.getNotice()
this.getBookRanking()
}, },
mounted() { mounted() {
this.rankingDataComputed()
this.startScrolling()
if (localStorage.getItem('videoIndex')) { if (localStorage.getItem('videoIndex')) {
this.videoIndex = parseInt(localStorage.getItem('videoIndex')) this.videoIndex = parseInt(localStorage.getItem('videoIndex'))
this.$nextTick(() => { this.$nextTick(() => {
if (this.slideData.length !== 0) {
this.$refs.carousel.setActiveItem(this.videoIndex) this.$refs.carousel.setActiveItem(this.videoIndex)
const videos = this.$refs.videos const videos = this.$refs.videos
console.log(videos)
console.log(this.videoIndex)
const nextVideo = videos[this.videoIndex] const nextVideo = videos[this.videoIndex]
videos.forEach((video) => { videos.forEach((video) => {
video.pause() video.pause()
@ -147,34 +163,97 @@ export default {
nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0 nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0
nextVideo.play() nextVideo.play()
}, 1000) }, 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: { 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() { 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) { setActiveItem(index) {
this.$refs.carousel.setActiveItem(index) this.$refs.carousel.setActiveItem(index)
@ -190,6 +269,7 @@ export default {
}, },
playNextVideo(index) { playNextVideo(index) {
const videos = this.$refs.videos const videos = this.$refs.videos
console.log('videos', videos)
let nextIndex = index let nextIndex = index
this.videoIndex = nextIndex this.videoIndex = nextIndex
if (index < this.slideData.length - 1) { if (index < this.slideData.length - 1) {
@ -212,11 +292,25 @@ export default {
nextVideo.play() nextVideo.play()
}, 1000) }, 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%; width: 100%;
height: 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> </style>

8
src/views/pageOne/index.vue
View File

@ -346,8 +346,8 @@ export default {
getLibBookTotal() { getLibBookTotal() {
const params = { const params = {
'libcode': 'LSJDFG,LJPFG,DCDFG,QYTSG,SJLFG,XMDFG,FXLFG,QLQFG,SEDSG,MZZFG,GYTZFG,KJSKCFG,JBTZFG,SKTZFG,XJZFG,PSZFG,DZQZFG,WXJDFG,CHJDFG,BSZFG,BZHFG', 'libcode': 'LSJDFG,LJPFG,DCDFG,QYTSG,SJLFG,XMDFG,FXLFG,QLQFG,SEDSG,MZZFG,GYTZFG,KJSKCFG,JBTZFG,SKTZFG,XJZFG,PSZFG,DZQZFG,WXJDFG,CHJDFG,BSZFG,BZHFG',
'starttime': '2000-01-01',
'endtime': '2034-01-01'
'starttime': this.getFormattedDate(new Date(), -1),
'endtime': this.getFormattedDate(new Date())
} }
return FetchLibBookTotal(params).then(res => { return FetchLibBookTotal(params).then(res => {
const result = JSON.parse(res.data) const result = JSON.parse(res.data)
@ -365,8 +365,8 @@ export default {
getTotalForLibcode(libcode) { getTotalForLibcode(libcode) {
const params = { const params = {
'libcode': libcode, 'libcode': libcode,
'startdate': '2000-01-01',
'enddate': '2034-01-01',
'startdate': this.getFormattedDate(new Date(), -1),
'enddate': this.getFormattedDate(new Date()),
'isrdtype': 0 'isrdtype': 0
} }
return FetchUsertotal(params).then(res => { return FetchUsertotal(params).then(res => {

159
src/views/pageThree/index.vue
View File

@ -22,25 +22,25 @@
</div> </div>
</li> </li>
</ul> </ul>
<YearCircle />
<YearCircle :year-all-num="yearAllNum" />
</div> </div>
<div class="three-lending-right lending-ranking"> <div class="three-lending-right lending-ranking">
<h5>分馆累计借阅排行榜</h5> <h5>分馆累计借阅排行榜</h5>
<div class="ranking-cont"> <div class="ranking-cont">
<ul class="ranking-title"> <ul class="ranking-title">
<li style="width: 0.725rem;">排名</li>
<li style="width: 0.625rem;">排名</li>
<li style="width: 1.5rem; text-align: left;">图书馆名称</li> <li style="width: 1.5rem; text-align: left;">图书馆名称</li>
<li style="flex:1;" /> <li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li>
<li style="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul> </ul>
<ul class="ranking-list"> <ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :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>
<li v-for="(item,index) in rankingYearWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: .625rem; 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 style="width: 1.5rem; text-align: left;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;"> <div class="ranking-progress" style="flex:1; align-self: center;">
<el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" /> <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
</div> </div>
<div style="width: 1.25rem; padding-right: .25rem; text-align: right;">{{ item.num }}<i style="padding-left:.0625rem;">本</i></div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
</li> </li>
</ul> </ul>
</div> </div>
@ -68,25 +68,25 @@
</div> </div>
</li> </li>
</ul> </ul>
<TodayCircle />
<TodayCircle :today-all-num="todayAllNum" />
</div> </div>
<div class="three-lending-right lending-ranking"> <div class="three-lending-right lending-ranking">
<h5>分馆今日借阅排行榜 </h5> <h5>分馆今日借阅排行榜 </h5>
<div class="ranking-cont"> <div class="ranking-cont">
<ul class="ranking-title"> <ul class="ranking-title">
<li style="width: 0.725rem;">排名</li>
<li style="width: 0.625rem;">排名</li>
<li style="width: 1.5rem; text-align: left;">图书馆名称</li> <li style="width: 1.5rem; text-align: left;">图书馆名称</li>
<li style="flex:1;" /> <li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .25rem; text-align: right;">借阅数量</li>
<li style="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul> </ul>
<ul class="ranking-list"> <ul class="ranking-list">
<li v-for="(item,index) in rankingWithPercentage" :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>
<li v-for="(item,index) in rankingTodayWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
<div style="width: 0.625rem; 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 style="width: 1.5rem; text-align: left;">{{ item.name }}</div>
<div class="ranking-progress" style="flex:1; align-self: center;"> <div class="ranking-progress" style="flex:1; align-self: center;">
<el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" /> <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
</div> </div>
<div style="width: 1.25rem; padding-right: .25rem; text-align: right;">{{ item.num }}<i style="padding-left:.0625rem;">本</i></div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
</li> </li>
</ul> </ul>
</div> </div>
@ -110,6 +110,7 @@
</template> </template>
<script> <script>
import { FetchLibcodeDetails, FetchLendingTotal } from '@/api/library'
import LineChartService from '@/components/echart/lineChartService' import LineChartService from '@/components/echart/lineChartService'
import BarEcharts from '@/components/echart/barEcharts' import BarEcharts from '@/components/echart/barEcharts'
import YearCircle from './module/yearCircle' import YearCircle from './module/yearCircle'
@ -133,78 +134,124 @@ export default {
inStorageData: [60, 92, 10, 68, 90, 76, 80], inStorageData: [60, 92, 10, 68, 90, 76, 80],
outStorageData: [20, 82, 191, 134, 90, 56, 30] outStorageData: [20, 82, 191, 134, 90, 56, 30]
}, },
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: [],
todayTotal: [], todayTotal: [],
yearTotal: []
yearTotal: [],
rankingYearData: [],
rankingTodayData: [],
rankingYearWithPercentage: [],
rankingTodayWithPercentage: [],
yearAllNum: {
headerLib: 0,
branchLib: 0
},
todayAllNum: {
headerLib: 0,
branchLib: 0
}
} }
}, },
computed: { computed: {
}, },
created() { created() {
this.getLendingTotal()
}, },
mounted() { mounted() {
this.rankingDataComputed()
this.initDataPreview()
setInterval(() => {
this.currentHover = (this.currentHover + 1) % this.rankingData.length
}, 1000)
}, },
methods: { methods: {
rankingDataComputed() {
const firstPlaceNum = this.rankingData[0].num
this.rankingWithPercentage = this.rankingData.map(item => {
const percentage = (item.num / firstPlaceNum) * 100
return { ...item, percentage }
})
},
paddingNum(num, length) { paddingNum(num, length) {
for (var len = (num + '').length; len < length; len = num.length) { for (var len = (num + '').length; len < length; len = num.length) {
num = '0' + num num = '0' + num
} }
return num return num
}, },
initDataPreview() {
// 数据概览
const previewData = {
'code': 0,
'data': {
'allYearNumCount': 325877,
'allUserOpenNumCount': 220
},
'message': 'success'
}
if (previewData.code !== 0) return
this.todayTotal = []
this.yearTotal = []
// 获取本年今年借阅情况
getLendingTotal() {
FetchLendingTotal().then(res => {
const result = JSON.parse(res.data)
if (result.success & result.resultlist.length !== 0) {
console.log('result.resultlist', result.resultlist)
// JCC_YEAR 本年借阅册数
// JCC_DAY 今日借阅册数
const dayNum = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_DAY, 0)
const yearNum = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_YEAR, 0)
this.todayTotal.push({ this.todayTotal.push({
id: 'todayTotal', id: 'todayTotal',
name: '今日累计借阅', name: '今日累计借阅',
value: this.$parent.formatter(this.paddingNum(previewData.data.allUserOpenNumCount, 5)),
valueArr: this.$parent.formatter(this.paddingNum(previewData.data.allUserOpenNumCount, 5)).split('')
value: this.$parent.formatter(this.paddingNum(dayNum, 5)),
valueArr: this.$parent.formatter(this.paddingNum(dayNum, 5)).split('')
}) })
this.yearTotal.push({ this.yearTotal.push({
id: 'yearTotal', id: 'yearTotal',
name: '本年累计借阅', name: '本年累计借阅',
value: this.$parent.formatter(previewData.data.allYearNumCount),
valueArr: this.$parent.formatter(previewData.data.allYearNumCount).split('')
value: this.$parent.formatter(yearNum),
valueArr: this.$parent.formatter(yearNum).split('')
}) })
setTimeout(() => {
this.$parent.timedRefresh(this.todayTotal, 'todayTotal') this.$parent.timedRefresh(this.todayTotal, 'todayTotal')
this.$parent.timedRefresh(this.yearTotal, 'yearTotal') this.$parent.timedRefresh(this.yearTotal, 'yearTotal')
}, 1000)
// setTimeout(() => {
// this.$parent.autoPagination(4)
// }, 8000)
// 总管就是QYTSG的数据，分馆就是其他除去999以为的合计
this.yearAllNum = {
'headerLib': result.resultlist.filter(item => item.LIBCODE === 'QYTSG')[0].JCC_YEAR,
'branchLib': result.resultlist.filter(item => item.LIBCODE !== 'QYTSG' && item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_YEAR, 0)
}
this.todayAllNum = {
'headerLib': result.resultlist.filter(item => item.LIBCODE === 'QYTSG')[0].JCC_DAY,
'branchLib': result.resultlist.filter(item => item.LIBCODE !== 'QYTSG' && item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_DAY, 0)
}
// 排行榜显示前6的
this.getLibcodeDetails(result.resultlist)
} else {
this.todayTotal = []
this.yearTotal = []
}
}).catch(error => {
console.error('Error', error)
})
},
// 分管显示内容
getLibcodeDetails(data) {
FetchLibcodeDetails().then(res => {
const result = JSON.parse(res.data)
if (result.length !== 0) {
const newDataArray = []
data.forEach(item => {
const foundItem = result.find(library => library.tcId === item.LIBCODE)
if (foundItem) {
const yearValue = item.JCC_YEAR || 0
const dayValue = item.JCC_DAY || 0
const newObj = {
name: foundItem.name,
JCC_YEAR: yearValue,
JCC_DAY: dayValue
}
newDataArray.push(newObj)
}
})
// 2. 根据JCC_YEAR的值进行降序排序
this.rankingYearData = newDataArray.sort((a, b) => b.JCC_YEAR - a.JCC_YEAR).slice(0, 6)
this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
// 3. 根据JCC_DAY的值进行降序排序
this.rankingTodayData = newDataArray.sort((a, b) => b.JCC_DAY - a.JCC_DAY).slice(0, 6)
this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY')
setInterval(() => {
this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
}, 1000)
}
}).catch(error => {
console.error('Error', error)
})
},
rankingDataComputed(rankingData, numType) {
const firstPlaceNum = rankingData[0][numType]
return rankingData.map(item => {
const percentage = (item[numType] / firstPlaceNum) * 100
return { ...item, percentage }
})
} }
} }
} }

33
src/views/pageThree/module/todayCircle.vue
View File

@ -6,13 +6,29 @@
<script> <script>
export default { export default {
components: {
props: {
todayAllNum: {
type: Object,
require: true,
default: function() {
return {}
}
}
}, },
data() { data() {
return { return {
} }
}, },
computed: {
watch: {
'todayAllNum': {
handler(val) {
setTimeout(() => {
this.initTodayCircle()
}, 100)
},
immediate: true,
deep: true
}
}, },
created() { created() {
}, },
@ -23,18 +39,9 @@ export default {
}, },
methods: { methods: {
initTodayCircle() { initTodayCircle() {
const yearAllnum = {
'code': 0,
'data': {
'headerLib': 588,
'branchLib': 60
},
'message': 'success'
}
if (yearAllnum.code !== 0) return
const optionData = [ const optionData = [
{ value: yearAllnum.data.headerLib || 0, name: '总馆' },
{ value: yearAllnum.data.branchLib || 0, name: '分馆' }
{ value: this.todayAllNum.headerLib || 0, name: '总馆' },
{ value: this.todayAllNum.branchLib || 0, name: '分馆' }
] ]
const myChart = this.$echarts.init(document.getElementById('todayType')) const myChart = this.$echarts.init(document.getElementById('todayType'))

33
src/views/pageThree/module/yearCircle.vue
View File

@ -6,13 +6,29 @@
<script> <script>
export default { export default {
components: {
props: {
yearAllNum: {
type: Object,
require: true,
default: function() {
return {}
}
}
}, },
data() { data() {
return { return {
} }
}, },
computed: {
watch: {
'yearAllNum': {
handler(val) {
setTimeout(() => {
this.initYearCircle()
}, 100)
},
immediate: true,
deep: true
}
}, },
created() { created() {
}, },
@ -23,18 +39,9 @@ export default {
}, },
methods: { methods: {
initYearCircle() { initYearCircle() {
const yearAllnum = {
'code': 0,
'data': {
'headerLib': 45585,
'branchLib': 15445
},
'message': 'success'
}
if (yearAllnum.code !== 0) return
const optionData = [ const optionData = [
{ value: yearAllnum.data.headerLib || 0, name: '总馆' },
{ value: yearAllnum.data.branchLib || 0, name: '分馆' }
{ value: this.yearAllNum.headerLib || 0, name: '总馆' },
{ value: this.yearAllNum.branchLib || 0, name: '分馆' }
] ]
const myChart = this.$echarts.init(document.getElementById('modelType')) const myChart = this.$echarts.init(document.getElementById('modelType'))

Write Preview
Loading…
Cancel
Save