From 314f0279a60f933512ff830d8bb63e1ce527b56c Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 24 Jul 2024 08:18:08 +0800
Subject: [PATCH] threepage

---
 public/index.html             |   2 +-
 src/App.vue                   |  27 ++++++++-
 src/assets/styles/index.scss  |   3 +-
 src/views/index.vue           |   6 ++
 src/views/pageThree/index.vue | 109 +++++++++++++++++++++++++++-------
 5 files changed, 123 insertions(+), 24 deletions(-)
diff --git a/public/index.html b/public/index.html
index edfd0ca..64f781f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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">
diff --git a/src/App.vue b/src/App.vue
index f26dc75..0575fe9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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;
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 5736692..6f19580 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1241,7 +1241,8 @@
     }
   }
   .ranking-list{
-    li{
+    li,
+    .ranking-item{
       display: flex;
       justify-content: space-around;
       font-size: .225rem;
diff --git a/src/views/index.vue b/src/views/index.vue
index c990df4..1519add 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -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() {
diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue
index e636fc3..d8352ff 100644
--- a/src/views/pageThree/index.vue
+++ b/src/views/pageThree/index.vue
@@ -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>
