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

threepage

master
xuhuajiao 7 months ago
parent
01e6188147
commit
314f0279a6
5 changed files with 123 additions and 24 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. 2
      public/index.html
  2. 27
      src/App.vue
  3. 3
      src/assets/styles/index.scss
  4. 6
      src/views/index.vue
  5. 109
      src/views/pageThree/index.vue

2
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en">
<html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

27
src/App.vue
View File

@ -1,9 +1,34 @@
<template> <template>
<div id="app"> <div id="app">
<router-view />
<router-view v-if="isRouterAlive" />
</div> </div>
</template> </template>
<script>
export default {
name: 'App',
// 实现页面强刷新
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
<style lang="scss"> <style lang="scss">
body { body {
margin: 0; margin: 0;

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

@ -1241,7 +1241,8 @@
} }
} }
.ranking-list{ .ranking-list{
li{
li,
.ranking-item{
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
font-size: .225rem; font-size: .225rem;

6
src/views/index.vue
View File

@ -52,6 +52,7 @@ export default {
PageThree, PageThree,
PageFour PageFour
}, },
inject: ['reload'],
data() { data() {
return { return {
currentIndex: 0, // 当前显示的页面索引 currentIndex: 0, // 当前显示的页面索引
@ -187,6 +188,11 @@ export default {
this.currentPage = this.pageData[this.currentIndex] this.currentPage = this.pageData[this.currentIndex]
this.startPageSwitch() this.startPageSwitch()
} }
}).catch(error => {
console.error('Error', error)
setTimeout(() => {
this.reload()
}, 5000)
}) })
}, },
stopAutoSwitch() { stopAutoSwitch() {

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

@ -30,11 +30,11 @@
<div class="ranking-cont"> <div class="ranking-cont">
<ul class="ranking-title"> <ul class="ranking-title">
<li style="width: 0.625rem;">排名</li> <li style="width: 0.625rem;">排名</li>
<li style="width: 1.5rem; text-align: left;">图书馆名称</li>
<li style="width: 1.875rem; text-align: left;">图书馆名称</li>
<li style="flex:1;" /> <li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .125rem; 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 rankingYearWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }"> <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: .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>
@ -43,7 +43,20 @@
</div> </div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<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> -->
<!-- :options="swiperOptionThumbs" -->
<swiper v-if="rankingYearWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingYearWithPercentage" :key="index">
<div class="ranking-item">
<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.875rem; 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: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
</div>
</swiper-slide>
</swiper>
</div> </div>
</div> </div>
</div> </div>
@ -80,16 +93,28 @@
<li style="flex:1;" /> <li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .125rem; 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 rankingTodayWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }"> <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: 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.75rem; 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: .125rem; text-align: right;">{{ item.JCC_DAY }}<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> -->
<swiper v-if="rankingTodayWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
<swiper-slide v-for="(item,index) in rankingTodayWithPercentage" :key="index">
<div class="ranking-item">
<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.875rem; 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: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
</div>
</swiper-slide>
</swiper>
</div> </div>
</div> </div>
</div> </div>
@ -116,13 +141,17 @@ import LineChart from '@/components/echart/lineChart'
import BarEcharts from '@/components/echart/barEcharts' import BarEcharts from '@/components/echart/barEcharts'
import YearCircle from '@/components/echart/yearCircle' import YearCircle from '@/components/echart/yearCircle'
import TodayCircle from '@/components/echart/todayCircle' import TodayCircle from '@/components/echart/todayCircle'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default { export default {
name: 'PageThree', name: 'PageThree',
components: { components: {
LineChart, LineChart,
BarEcharts, BarEcharts,
YearCircle, YearCircle,
TodayCircle
TodayCircle,
swiper,
swiperSlide
}, },
data() { data() {
return { return {
@ -151,21 +180,39 @@ export default {
headerLib: 0, headerLib: 0,
branchLib: 0 branchLib: 0
}, },
rankInterval: null
rankInterval: null,
swiperOptionThumbs: {
direction: 'vertical',
loopedSlides: 6,
slidesPerView: 6,
slidesPerGroup: 6,
// loop: true,
// centeredSlides: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true
}
},
isKeep: false
} }
}, },
computed: { computed: {
swiper() {
return this.$refs.swiperThumbs.swiper
}
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.rankInterval) clearInterval(this.rankInterval)
this.rankInterval = null this.rankInterval = null
}, },
created() { created() {
this.getWeekJH()
}, },
activated() { activated() {
this.getLendingTotal() this.getLendingTotal()
this.getTodayJH() this.getTodayJH()
this.isKeep = true
// if (this.rankingYearWithPercentage.length !== 0) { // if (this.rankingYearWithPercentage.length !== 0) {
// this.currentHover = -1 // this.currentHover = -1
// this.rankInterval = setInterval(() => { // this.rankInterval = setInterval(() => {
@ -176,11 +223,11 @@ export default {
deactivated() { deactivated() {
clearInterval(this.rankInterval) clearInterval(this.rankInterval)
this.rankInterval = null this.rankInterval = null
this.isKeep = false
}, },
mounted() { mounted() {
// this.getLendingTotal() // this.getLendingTotal()
// this.getTodayJH() // this.getTodayJH()
this.getWeekJH()
}, },
methods: { methods: {
paddingNum(num, length) { paddingNum(num, length) {
@ -196,7 +243,6 @@ export default {
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) {
// console.log('result.resultlist', result.resultlist)
// JCC_YEAR 本年借阅册数 // JCC_YEAR 本年借阅册数
// JCC_DAY 今日借阅册数 // JCC_DAY 今日借阅册数
const dayNum = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_DAY, 0) const dayNum = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.JCC_DAY, 0)
@ -245,6 +291,7 @@ export default {
const newDataArray = [] const newDataArray = []
data.forEach(item => { data.forEach(item => {
const foundItem = result.find(library => library.tcId === item.LIBCODE) const foundItem = result.find(library => library.tcId === item.LIBCODE)
if (foundItem) { if (foundItem) {
const yearValue = item.JCC_YEAR || 0 const yearValue = item.JCC_YEAR || 0
const dayValue = item.JCC_DAY || 0 const dayValue = item.JCC_DAY || 0
@ -257,15 +304,11 @@ export default {
} }
}) })
// 2. 根据JCC_YEAR的值进行降序排序 // 2. 根据JCC_YEAR的值进行降序排序
this.rankingYearData = newDataArray.sort((a, b) => b.JCC_YEAR - a.JCC_YEAR).slice(0, 6)
this.rankingYearData = newDataArray.sort((a, b) => b.JCC_YEAR - a.JCC_YEAR)
this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR') this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
// 3. 根据JCC_DAY的值进行降序排序 // 3. 根据JCC_DAY的值进行降序排序
this.rankingTodayData = newDataArray.sort((a, b) => b.JCC_DAY - a.JCC_DAY).slice(0, 6)
this.rankingTodayData = newDataArray.sort((a, b) => b.JCC_DAY - a.JCC_DAY)
this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY') this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY')
this.rankInterval = setInterval(() => {
this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
}, 1000)
} }
}).catch(error => { }).catch(error => {
console.error('Error', error) console.error('Error', error)
@ -278,16 +321,18 @@ export default {
} }
// eslint-disable-next-line no-prototype-builtins // eslint-disable-next-line no-prototype-builtins
if (typeof rankingData[0] !== 'object' || !rankingData[0].hasOwnProperty(numType)) {
return []
}
// if (typeof rankingData[0] !== 'object' || !rankingData[0].hasOwnProperty(numType)) {
// return []
// }
const firstPlaceNum = rankingData[0][numType] // NAN const firstPlaceNum = rankingData[0][numType] // NAN
if (firstPlaceNum === 0) { if (firstPlaceNum === 0) {
// 处理除数为0的情况 // 处理除数为0的情况
console.log('firstPlaceNum为0，不可用于被除') console.log('firstPlaceNum为0，不可用于被除')
return []
return rankingData.map(item => {
return { ...item, percentage: 0 } // 直接将 percentage 设置为 0
})
} }
return rankingData.map(item => { return rankingData.map(item => {
const percentage = (item[numType] / firstPlaceNum) * 100 const percentage = (item[numType] / firstPlaceNum) * 100
@ -389,4 +434,26 @@ export default {
@import "~@/assets/styles/index.scss"; @import "~@/assets/styles/index.scss";
@import "~@/assets/styles/font-some.css"; @import "~@/assets/styles/font-some.css";
.swiper {
width: 100%;
height: 3rem !important;
.swiper-slide {
height: .5rem !important;
}
.swiper-slide-active,
.swiper-slide-duplicate-active{
// background-color: #142B76;
// border-radius: .05rem;
// animation: myListScale 1s forwards;
}
}
@keyframes myListScale {
to {
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save