From b32daeab6996e0c7ce0506f40531f2149ba9e642 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 18 Jul 2024 14:25:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D1440/=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss         | 131 ++++++++++++++++++++---
 src/components/echart/barEcharts.vue |   7 +-
 src/components/echart/lineChart.vue  |  19 ++--
 src/components/echart/yearCircle.vue |   8 +-
 src/utils/resizeMixins.js            |  55 +++++++---
 src/views/map/index.vue              |  53 ++++++----
 src/views/pageThree/index.vue        | 151 +++++++++++++--------------
 7 files changed, 281 insertions(+), 143 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 8751d20..5736692 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1102,8 +1102,7 @@
     overflow: hidden;
   }
   .lib-text{
-    position: absolute;
-    // transition: top 1s linear;
+    position: relative;
     margin-right: .175rem;
     font-size: .225rem;
     line-height: .35rem;
@@ -1111,6 +1110,22 @@
     overflow: hidden;
   }
 }
+
+
+.lib-animation {
+  animation: myLib 26s linear infinite;
+  animation-fill-mode: forwards;
+}
+
+@keyframes myLib {
+  0% {
+    transform: translateY(1rem);
+  }
+  100% {
+    transform: translateY(calc(-1 * var(--container-height)));
+  }
+}
+
 .map-hx-bg{
   width: 16.325rem;
   height: 11.3125rem;
@@ -1500,21 +1515,23 @@
         text-indent: 2em;
       }
     }
-    .scroll-animation {
-      animation: myMove 16s linear infinite;
-      animation-fill-mode: forwards;
-    }
+  }
+}
 
-    @keyframes myMove {
-      0% {
-        transform: translateY(1rem);
-      }
-      100% {
-        transform: translateY(calc(-1 * var(--container-height)));
-      }
-    }
+.scroll-animation {
+  animation: myMove 16s linear infinite;
+  animation-fill-mode: forwards;
+}
+
+@keyframes myMove {
+  0% {
+    transform: translateY(1rem);
+  }
+  100% {
+    transform: translateY(calc(-1 * var(--container-height)));
   }
 }
+
 .four-ranking{
   height: 4.85rem;
   &.lending-ranking{
@@ -1571,4 +1588,90 @@
     color: #4DDBFF;
     text-align: center;
   }
+}
+
+
+
+
+
+@media (max-width: 1440px) {
+  .pageOne-database{
+    margin-top: .375rem;
+    height: 6.5rem;
+  }
+  .pageOne-book {
+    .pageOne-book-content {
+      padding: .375rem 0;
+      .wechat-code{
+        width: 4.25rem;
+        height: 5.5rem;
+        .wechat-img{
+          width: 2.25rem;
+          height: 2.25rem;
+          line-height: 2.5rem;
+        }
+        span{
+          font-size: .275rem;
+        }
+      }
+    }
+  }
+  .scrollBox{
+    .seamless01{
+      margin-bottom: .5rem;
+    }
+    ul{
+      height: 2.3rem;
+      li{
+        width:  1.625rem;
+        height: 2.3rem;
+        margin-right: .7375rem;
+        .bord{
+          .book-img{
+            width: 1.625rem;
+            height: 2.3rem;
+          }
+        }
+      }
+    }
+  }
+
+  .page-three {
+    .three03, 
+    .three04{
+      height: calc(100vh/2 - 1.375rem);
+    }
+  }
+
+  .four-video{
+    width: 16.625rem;
+    height: calc(100vh - 2.5rem);
+    background-size: 100% 100%;
+  }
+
+  .el-carousel__container{
+    height: calc(100vh - 4.5rem);
+    overflow: hidden;
+  }
+
+  .four-notice{
+    height: 4rem;
+    .seamless-warp{
+      height: 3.25rem;
+    }
+  }
+
+  .four-contact{
+    width: 5.9375rem;
+    height: 2.5rem;
+    background-size: 100% 100%;
+    .wechat-img{
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    span{
+      font-size: .275rem;
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/src/components/echart/barEcharts.vue b/src/components/echart/barEcharts.vue
index 1133f6c..b25ec0b 100644
--- a/src/components/echart/barEcharts.vue
+++ b/src/components/echart/barEcharts.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 近七日借阅统计 -->
-  <div id="main1" ref="chartContainer" :style="{height:height,width:width}" />
+  <div ref="barContainer" :style="{height:height,width:width}" />
 </template>
 
 <script>
@@ -55,10 +55,11 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
+    window.addEventListener('resize', this.__resizeHandler)
     this.resetPieChartData()
   },
   methods: {
-    // 重绘饼图
+    // 重绘bar
     resetPieChartData() {
       clearInterval(this.timeRePie)
       this.timeRePie = setInterval(() => {
@@ -73,7 +74,7 @@ export default {
     },
     initChart() {
       // const dom = document.getElementById('main2')
-      const dom = this.$refs.chartContainer
+      const dom = this.$refs.barContainer
       this.chart = echarts.init(dom)
       this.setOptions(this.chartWeeklyData)
     },
diff --git a/src/components/echart/lineChart.vue b/src/components/echart/lineChart.vue
index d8246cf..08dd8c9 100644
--- a/src/components/echart/lineChart.vue
+++ b/src/components/echart/lineChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="main2" ref="chartContainer" :style="{height:height,width:width}" />
+  <div ref="lineContainer" :style="{height:height,width:width}" />
 </template>
 
 <script>
@@ -37,17 +37,11 @@ export default {
       mmediate: true,
       handler(val) {
         setTimeout(() => {
-          this.setOptions(val)
+          this.initChart()
         }, 100)
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-    this.resetPiechartDayData()
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -55,6 +49,13 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.addEventListener('resize', this.__resizeHandler)
+    this.resetPiechartDayData()
+  },
   methods: {
     resetPiechartDayData() {
       clearInterval(this.timeRePie)
@@ -70,7 +71,7 @@ export default {
     },
     initChart() {
       // const dom = document.getElementById('main2')
-      const dom = this.$refs.chartContainer
+      const dom = this.$refs.lineContainer
       this.chart = echarts.init(dom, 'dark')
       this.setOptions(this.chartDayData)
     },
diff --git a/src/components/echart/yearCircle.vue b/src/components/echart/yearCircle.vue
index c9f2d28..29cf257 100644
--- a/src/components/echart/yearCircle.vue
+++ b/src/components/echart/yearCircle.vue
@@ -87,8 +87,12 @@ export default {
               const count = arrCount(optionData)
               if (optionData) {
                 const flag = optionData?.find(item => name === item.name)
-                if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
-              } else return name
+                if (flag) {
+                  const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
+                  return [`{name|${name}}`, `{num|${percentage}}`]
+                }
+              }
+              return name
             },
             textStyle: {
               rich: {
diff --git a/src/utils/resizeMixins.js b/src/utils/resizeMixins.js
index dbdffd8..6adc38e 100644
--- a/src/utils/resizeMixins.js
+++ b/src/utils/resizeMixins.js
@@ -1,26 +1,55 @@
-// 混入代码 resize-mixins.js
-import { debounce } from '@/utils/index'
-const resizeChartMethod = '$__resizeChartMethod'
+import { debounce } from '@/utils'
 
 export default {
   data() {
-    // 在组件内部将图表init的引用映射到chart属性上
     return {
-      chart: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
-  created() {
-    window.addEventListener('resize', this[resizeChartMethod], false)
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
   },
   beforeDestroy() {
-    window.removeEventListener('reisze', this[resizeChartMethod])
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
   },
   methods: {
-    // 通过lodash的防抖函数来控制resize的频率
-    [resizeChartMethod]: debounce(function() {
-      if (this.chart) {
-        this.chart.resize()
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
       }
-    }, 100)
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
   }
 }
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 01cf5c2..33c5a20 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -42,7 +42,7 @@
             </li>
           </ul>
           <div ref="scrollInfo" class="scroll-container">
-            <div ref="marquee" class="lib-text" :style="{ top: position + 'px' }">{{ libCurrent && libCurrent.explain }}</div>
+            <div ref="marquee" class="lib-text" v-html="libCurrent && libCurrent.explain" />
           </div>
         </div>
       </div>
@@ -161,29 +161,42 @@ export default {
       clearTimeout(this.timeTicket)
       clearInterval(this.rankInterval)
       clearInterval(this.timer)
-      localStorage.setItem('libIndexItem', this.libIndex)
-      localStorage.setItem('libCurrentItem', this.libCurrent)
+      // localStorage.setItem('libIndexItem', this.libIndex)
+      // localStorage.setItem('libCurrentItem', this.libCurrent)
       localStorage.setItem('countItem', this.count)
 
       this.rankInterval = null
       this.timer = null
       this.timeTicket = null
     },
+    // startScrolling() {
+    //   this.timer = setInterval(() => {
+    //     this.position -= this.speed
+    //     // 当文字完全滚出容器时，重置位置
+    //     // const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
+    //     this.$nextTick(() => {
+    //       const containerHeight = this.$refs.scrollInfo.offsetHeight
+    //       const contentHeight = this.$refs.marquee.offsetHeight
+    //       if (contentHeight <= containerHeight) {
+    //         this.position = 20
+    //       } else if (Math.abs(this.position) >= contentHeight) {
+    //         this.position = containerHeight
+    //       }
+    //     })
+    //   }, 120)
+    // },
     startScrolling() {
-      this.timer = setInterval(() => {
-        this.position -= this.speed
-        // 当文字完全滚出容器时，重置位置
-        // const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
-        this.$nextTick(() => {
-          const containerHeight = this.$refs.scrollInfo.offsetHeight
-          const contentHeight = this.$refs.marquee.offsetHeight
-          if (contentHeight <= containerHeight) {
-            this.position = 20
-          } else if (Math.abs(this.position) >= contentHeight) {
-            this.position = containerHeight
-          }
-        })
-      }, 40)
+      this.$nextTick(() => {
+        const containerHeight = this.$refs.scrollInfo.offsetHeight
+        const contentHeight = this.$refs.marquee.offsetHeight
+        // 设置 CSS 变量 --container-height，以便在 CSS 中使用
+        this.$refs.marquee.parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
+        if (contentHeight > containerHeight) {
+          this.$refs.marquee.classList.add('lib-animation')
+        } else {
+          this.$refs.marquee.classList.remove('lib-animation')
+        }
+      })
     },
     getReadRanking() {
       const params = {
@@ -372,12 +385,9 @@ export default {
             this.initChart() // 初始化
             setTimeout(() => {
               this.updateChart() // 更新数据，散点轮播显示
+              this.startScrolling()
               window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
             }, 300)
-
-            if (document.getElementsByClassName('scroll-container')[0]) {
-              this.startScrolling()
-            }
           }
         } else {
           this.libInfoData = []
@@ -945,6 +955,7 @@ export default {
                 console.log('_self.libCurrent', _self.libCurrent)
                 _self.updatePageWithData()
                 _self.autohover()
+                _self.startScrolling()
                 _self.currentIndex = 0
               }, 3000)
             }
diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue
index e65cbe7..e636fc3 100644
--- a/src/views/pageThree/index.vue
+++ b/src/views/pageThree/index.vue
@@ -96,14 +96,14 @@
       </div>
       <div class="three-item three03">
         <div class="database-title">今日借阅趋势</div>
-        <div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 35px);">
+        <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 35px);">
           <LineChart :chart-day-data="chartDayData" />
         </div>
       </div>
       <div class="three-item three04">
         <div class="database-title">近7日借阅统计</div>
-        <div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 20px);">
-          <BarEcharts ref="weeklyRef" :chart-weekly-data="chartWeeklyData" />
+        <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 20px);">
+          <BarEcharts :chart-weekly-data="chartWeeklyData" />
         </div>
       </div>
     </div>
@@ -189,7 +189,7 @@ export default {
       }
       return num
     },
-    // 获取本年今年借阅情况
+    // 获取本年/今日借阅情况
     getLendingTotal() {
       this.todayTotal = []
       this.yearTotal = []
@@ -297,96 +297,85 @@ export default {
     // 今日借还
     getTodayJH() {
       FetchTodayJH().then(res => {
+        this.chartDayData = {
+          timeData: [],
+          returnData: [],
+          borrowedData: []
+        }
         const result = res.data
-        if (result.length !== 0) {
-          this.chartDayData = {
-            timeData: [],
-            returnData: [],
-            borrowedData: []
+        const time = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
+        time.forEach((hour, index) => {
+          // 查找 result 中是否有对应的 logHour
+          const foundItem = result.find(item => item.logHour === index + 7) // 因为 logHour 是从 7 开始，所以需要加上 7
+          if (foundItem) {
+            // 如果找到了对应的 logHour，则将数据加入 chartDayData
+            this.chartDayData.timeData.push(`${foundItem.logHour}:00`)
+            this.chartDayData.returnData.push(foundItem.hccDay)
+            this.chartDayData.borrowedData.push(foundItem.jccDay)
+          } else {
+            // 如果没找到对应的 logHour，则将默认值加入 chartDayData
+            this.chartDayData.timeData.push(`${hour}`)
+            this.chartDayData.returnData.push(0) // 默认值为 0
+            this.chartDayData.borrowedData.push(0) // 默认值为 0
           }
-          const time = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
-          time.forEach((hour, index) => {
-            // 查找 result 中是否有对应的 logHour
-            const foundItem = result.find(item => item.logHour === index + 7) // 因为 logHour 是从 7 开始，所以需要加上 7
-            if (foundItem) {
-              // 如果找到了对应的 logHour，则将数据加入 chartDayData
-              this.chartDayData.timeData.push(`${foundItem.logHour}:00`)
-              this.chartDayData.returnData.push(foundItem.hccDay)
-              this.chartDayData.borrowedData.push(foundItem.jccDay)
-            } else {
-              // 如果没找到对应的 logHour，则将默认值加入 chartDayData
-              this.chartDayData.timeData.push(`${hour}`)
-              this.chartDayData.returnData.push(0) // 默认值为 0
-              this.chartDayData.borrowedData.push(0) // 默认值为 0
-            }
-          })
-        } else {
-          this.chartDayData = {
-            timeData: [],
-            returnData: [],
-            borrowedData: []
-          }
-        }
+        })
       }).catch(error => {
         console.error('Error', error)
       })
     },
     getWeekJH() {
       FetchWeekJH().then(res => {
+        this.chartWeeklyData = {
+          date: [],
+          inchartWeeklyData: [],
+          outchartWeeklyData: []
+        }
         const result = res.data
-        if (result.length !== 0) {
-          // 获取当天日期
-          const currentDate = new Date()
-          const today = currentDate.toISOString().slice(0, 10)
-          // 根据数据排除当天的数据
-          const filteredData = result.filter(entry => {
-            const entryDate = new Date(entry.createTime).toISOString().slice(0, 10)
-            return entryDate !== today
-          })
-          // 获取过去一周的
-          const pastWeekDates = []
-          for (let i = 1; i <= 7; i++) {
-            const date = new Date()
-            date.setDate(currentDate.getDate() - i)
-            pastWeekDates.push(date.toISOString().slice(0, 10))
-          }
+        // 获取当天日期
+        const currentDate = new Date()
+        const today = currentDate.toISOString().slice(0, 10)
+        // 根据数据排除当天的数据
+        const filteredData = result.filter(entry => {
+          const entryDate = new Date(entry.createTime).toISOString().slice(0, 10)
+          return entryDate !== today
+        })
+        // 获取过去一周的
+        const pastWeekDates = []
+        for (let i = 1; i <= 7; i++) {
+          const date = new Date()
+          date.setDate(currentDate.getDate() - i)
+          pastWeekDates.push(date.toISOString().slice(0, 10))
+        }
 
-          const matchData = filteredData.reduce((accData, item) => {
-            // 根据已有的数据获取相关日期
-            const entryDate = new Date(item.createTime).toISOString().slice(0, 10)
-            if (accData[entryDate]) {
-              accData[entryDate].jccDayTotal += item.jccDayTotal
-              accData[entryDate].hccDayTotal += item.hccDayTotal
-            } else {
-              accData[entryDate] = {
-                jccDayTotal: item.jccDayTotal,
-                hccDayTotal: item.hccDayTotal
-              }
+        const matchData = filteredData.reduce((accData, item) => {
+          // 根据已有的数据获取相关日期
+          const entryDate = new Date(item.createTime).toISOString().slice(0, 10)
+          if (accData[entryDate]) {
+            accData[entryDate].jccDayTotal += item.jccDayTotal
+            accData[entryDate].hccDayTotal += item.hccDayTotal
+          } else {
+            accData[entryDate] = {
+              jccDayTotal: item.jccDayTotal,
+              hccDayTotal: item.hccDayTotal
             }
-            return accData
-          }, {})
+          }
+          return accData
+        }, {})
 
-          const completeData = pastWeekDates.map(date => ({
-            date: date.split('-').join('/'),
-            jccDayTotal: matchData[date] ? matchData[date].jccDayTotal : 0,
-            hccDayTotal: matchData[date] ? matchData[date].hccDayTotal : 0
-          }))
+        const completeData = pastWeekDates.map(date => ({
+          date: date.split('-').join('/'),
+          jccDayTotal: matchData[date] ? matchData[date].jccDayTotal : 0,
+          hccDayTotal: matchData[date] ? matchData[date].hccDayTotal : 0
+        }))
+        // 根据时间排序
+        completeData.sort((a, b) => new Date(a.date) - new Date(b.date))
 
-          // 根据时间排序
-          completeData.sort((a, b) => new Date(a.date) - new Date(b.date))
-          // 日期X轴数据
-          this.chartWeeklyData.date = completeData.map(item => item.date)
-          // in 归还
-          this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
-          // // out 借出
-          this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
-        } else {
-          this.chartWeeklyData = {
-            date: [],
-            inchartWeeklyData: [],
-            outchartWeeklyData: []
-          }
-        }
+        // 日期X轴数据
+        this.chartWeeklyData.date = completeData.map(item => item.date)
+        // in 归还
+        this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
+        // // out 借出
+        this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
       }).catch(error => {
         console.error('Error', error)
       })