From 21a30cefc6f7cb0a095d23cf649c514258cf127b Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 31 Jul 2024 08:14:21 +0800
Subject: [PATCH] three

---
 src/views/pageThree/index.vue | 77 +++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue
index d8352ff..f67ad36 100644
--- a/src/views/pageThree/index.vue
+++ b/src/views/pageThree/index.vue
@@ -34,7 +34,7 @@
                 <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,9 +43,8 @@
                   </div>
                   <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
                 </li>
-              </ul> -->
-              <!--  :options="swiperOptionThumbs" -->
-              <swiper v-if="rankingYearWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
+              </ul>
+              <!-- <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>
@@ -56,7 +55,7 @@
                     <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>
+              </swiper> -->
             </div>
           </div>
         </div>
@@ -93,7 +92,7 @@
                 <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.75rem; text-align: left;">{{ item.name }}</div>
@@ -102,8 +101,8 @@
                   </div>
                   <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
                 </li>
-              </ul> -->
-              <swiper v-if="rankingTodayWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
+              </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>
@@ -114,7 +113,7 @@
                     <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>
+              </swiper> -->
             </div>
           </div>
         </div>
@@ -141,17 +140,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'
+// import { swiper, swiperSlide } from 'vue-awesome-swiper'
+// import 'swiper/dist/css/swiper.css'
 export default {
   name: 'PageThree',
   components: {
     LineChart,
     BarEcharts,
     YearCircle,
-    TodayCircle,
-    swiper,
-    swiperSlide
+    TodayCircle
+    // swiper,
+    // swiperSlide
   },
   data() {
     return {
@@ -305,10 +304,18 @@ export default {
           })
           // 2. 根据JCC_YEAR的值进行降序排序
           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')
+          // 不滚动只显示6条
+          this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR').splice(0, 6)
           // 3. 根据JCC_DAY的值进行降序排序
           this.rankingTodayData = newDataArray.sort((a, b) => b.JCC_DAY - a.JCC_DAY)
-          this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY')
+          // this.rankingYearWithPercentage = this.rankingDataComputed(this.rankingYearData, 'JCC_YEAR')
+          // 不滚动只显示6条
+          this.rankingTodayWithPercentage = this.rankingDataComputed(this.rankingTodayData, 'JCC_DAY').splice(0, 6)
+          // 不滚动只显示6条
+          this.rankInterval = setInterval(() => {
+            this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
+          }, 1000)
         }
       }).catch(error => {
         console.error('Error', error)
@@ -434,26 +441,26 @@ export default {
 @import "~@/assets/styles/index.scss";
 @import "~@/assets/styles/font-some.css";
 
-.swiper {
-  width: 100%;
-  height: 3rem !important;
+// .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;
-	}
-}
+//   .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);
-  }
-}
+// @keyframes myListScale {
+//   to {
+//     -webkit-transform: scaleX(1) scaleY(1);
+//     transform: scaleX(1) scaleY(1);
+//   }
+// }
 
 </style>