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
Split 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>
<html lang="en">
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

27
src/App.vue
View File

@ -1,9 +1,34 @@
<template>
<div id="app">
<router-view />
<router-view v-if="isRouterAlive" />
</div>
</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">
body {
margin: 0;

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

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

6
src/views/index.vue
View File

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

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

@ -30,11 +30,11 @@
<div class="ranking-cont">
<ul class="ranking-title">
<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="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul>
<ul class="ranking-list">
<!-- <ul class="ranking-list">
<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>
@ -43,7 +43,20 @@
</div>
<div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
</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>
@ -80,16 +93,28 @@
<li style="flex:1;" />
<li style="width: 1.25rem; padding-right: .125rem; text-align: right;">借阅数量</li>
</ul>
<ul class="ranking-list">
<!-- <ul class="ranking-list">
<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.75rem; 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>
</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>
@ -116,13 +141,17 @@ import LineChart from '@/components/echart/lineChart'
import BarEcharts from '@/components/echart/barEcharts'
import YearCircle from '@/components/echart/yearCircle'
import TodayCircle from '@/components/echart/todayCircle'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'PageThree',
components: {
LineChart,
BarEcharts,
YearCircle,
TodayCircle
TodayCircle,
swiper,
swiperSlide
},
data() {
return {
@ -151,21 +180,39 @@ export default {
headerLib: 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: {
swiper() {
return this.$refs.swiperThumbs.swiper
}
},
beforeDestroy() {
clearInterval(this.rankInterval)
this.rankInterval = null
},
created() {
this.getWeekJH()
},
activated() {
this.getLendingTotal()
this.getTodayJH()
this.isKeep = true
// if (this.rankingYearWithPercentage.length !== 0) {
// this.currentHover = -1
// this.rankInterval = setInterval(() => {
@ -176,11 +223,11 @@ export default {
deactivated() {
clearInterval(this.rankInterval)
this.rankInterval = null
this.isKeep = false
},
mounted() {
// this.getLendingTotal()
// this.getTodayJH()
this.getWeekJH()
},
methods: {
paddingNum(num, length) {
@ -196,7 +243,6 @@ export default {
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)
@ -245,6 +291,7 @@ export default {
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
@ -257,15 +304,11 @@ export default {
}
})
// 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')
// 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.rankInterval = setInterval(() => {
this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
}, 1000)
}
}).catch(error => {
console.error('Error', error)
@ -278,16 +321,18 @@ export default {
}
// 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
if (firstPlaceNum === 0) {
// 处理除数为0的情况
console.log('firstPlaceNum为0，不可用于被除')
return []
return rankingData.map(item => {
return { ...item, percentage: 0 } // 直接将 percentage 设置为 0
})
}
return rankingData.map(item => {
const percentage = (item[numType] / firstPlaceNum) * 100
@ -389,4 +434,26 @@ export default {
@import "~@/assets/styles/index.scss";
@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>
Write Preview
Loading…
Cancel
Save