页面优化修改

.env.production

@@ -2,7 +2,7 @@ ENV = 'production'
 
 # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
-VUE_APP_BASE_API  = 'http://172.22.0.23:8080'
+VUE_APP_BASE_API  = 'http://192.168.1.80:7070'
 # VUE_APP_BASE_API  = 'http://127.0.0.1:8080'
 # 如果接口是 http 形式， wss 需要改为 ws
-VUE_APP_WS_API = 'ws://172.22.0.23:7071'
+VUE_APP_WS_API = 'ws://192.168.1.80:7071'

package.json

@@ -19,6 +19,7 @@
     "jquery": "^3.7.1",
     "svg-sprite-loader": "^6.0.11",
     "TagCloud": "^2.5.0",
+    "video.js": "^8.16.1",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
     "vue-count-to": "^1.0.13",

src/components/echart/barEcharts.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 近七日借阅统计 -->
-  <div id="main1" :style="{height:height,width:width}" />
+  <div id="main1" ref="chartContainer" :style="{height:height,width:width}" />
 </template>
 
 <script>
@@ -34,18 +34,27 @@ export default {
     }
   },
   watch: {
-    'chartWeeklyData': {
+    chartWeeklyData: {
       handler(val) {
         setTimeout(() => {
-          this.drawChart()
+          this.initChart()
         }, 100)
       },
       immediate: true,
       deep: true
     }
   },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
   mounted() {
-    this.drawChart()
+    this.$nextTick(() => {
+      this.initChart()
+    })
     this.resetPieChartData()
   },
   methods: {
@@ -59,100 +68,16 @@ export default {
         }
         // 不先清空chart没法重绘
         this.chart.clear()
-        this.chart.setOption(this.option) // 获取echarts数据的方法
+        this.initChart()
       }, 8000)
     },
-    drawChart() {
-      const app = {}
-      const chartDom = document.getElementById('main1')
-      this.chart = echarts.init(chartDom)
-
-      let option = null
-      const posList = [
-        'left',
-        'right',
-        'top',
-        'bottom',
-        'inside',
-        'insideTop',
-        'insideLeft',
-        'insideRight',
-        'insideBottom',
-        'insideTopLeft',
-        'insideTopRight',
-        'insideBottomLeft',
-        'insideBottomRight'
-      ]
-      app.configParameters = {
-        rotate: {
-          min: -90,
-          max: 90
-        },
-        align: {
-          options: {
-            left: 'left',
-            center: 'center',
-            right: 'right'
-          }
-        },
-        verticalAlign: {
-          options: {
-            top: 'top',
-            middle: 'middle',
-            bottom: 'bottom'
-          }
-        },
-        position: {
-          options: posList.reduce(function(map, pos) {
-            map[pos] = pos
-            return map
-          }, {})
-        },
-        distance: {
-          min: 0,
-          max: 100
-        }
-      }
-      app.config = {
-        rotate: 90,
-        align: 'left',
-        verticalAlign: 'middle',
-        position: 'insideBottom',
-        distance: 15,
-        onChange: function() {
-          const labelOption = {
-            rotate: app.config.rotate,
-            align: app.config.align,
-            verticalAlign: app.config.verticalAlign,
-            position: app.config.position,
-            distance: app.config.distance
-          }
-          this.chart.setOption({
-            series: [
-              {
-                label: labelOption
-              },
-              {
-                label: labelOption
-              }
-            ]
-          })
-        }
-      }
-      const labelOption = {
-        show: false,
-        position: app.config.position,
-        distance: app.config.distance,
-        align: app.config.align,
-        verticalAlign: app.config.verticalAlign,
-        rotate: app.config.rotate,
-        formatter: '{c}  {name|{a}}',
-        fontSize: 16,
-        rich: {
-          name: {}
-        }
-      }
-
+    initChart() {
+      // const dom = document.getElementById('main2')
+      const dom = this.$refs.chartContainer
+      this.chart = echarts.init(dom)
+      this.setOptions(this.chartWeeklyData)
+    },
+    setOptions({ date, outchartWeeklyData, inchartWeeklyData } = {}) {
       // 获取当前日期
       var today = new Date()
       // 计算一周前的日期
@@ -165,7 +90,7 @@ export default {
         xAxisData.push(echarts.format.formatTime('yyyy-MM-dd', day))
       }
 
-      option = {
+      this.chart.setOption({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -211,7 +136,7 @@ export default {
         xAxis: [{
           type: 'category',
           axisTick: { show: false },
-          data: this.chartWeeklyData.date,
+          data: date,
           axisLine: { // 轴线的颜色以及宽度
             lineStyle: {
               color: '#113D72'
@@ -273,29 +198,30 @@ export default {
             type: 'bar',
             barWidth: 14, // 柱图宽度
             barGap: '30%',
-            label: labelOption,
             emphasis: {
               focus: 'series'
             },
-            data: this.chartWeeklyData.outchartWeeklyData,
-            color: '#41A3FF'
+            data: outchartWeeklyData,
+            itemStyle: {
+              color: '#41A3FF'
+            }
           },
           {
             name: '归还',
             type: 'bar',
             barWidth: 14, // 柱图宽度
-            label: labelOption,
             emphasis: {
               focus: 'series'
             },
-            data: this.chartWeeklyData.inchartWeeklyData,
-            color: '#F9BE1D'
+            data: inchartWeeklyData,
+            itemStyle: {
+              color: '#FFD14F'
+            }
           }
         ]
-      }
-      this.option = option
-      option && this.chart.setOption(option)
+      })
     }
+
   }
 }
 </script>

src/views/map/index.vue

@@ -47,7 +47,7 @@
         </div>
       </div>
       <!-- map -->
-      <div ref="chart" style="width: 960px; height: 924px; margin:0 .125rem; z-index: 999;" />
+      <div ref="chart" style="width: 920px; height: 924px;  z-index: 999; border:1px solid rgba(0, 0, 0, 0);" />
       <div class="map-hx-bg">
         <div class="map-hx-small" />
         <div class="map-hx-big" />
@@ -131,29 +131,44 @@ export default {
     }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
-    clearTimeout(this.timeTicket)
-    clearInterval(this.rankInterval)
-    clearInterval(this.timer)
-    localStorage.setItem('libIndexItem', this.libIndex)
-    localStorage.setItem('libCurrentItem', this.libCurrent)
-    localStorage.setItem('countItem', this.count)
-
-    this.rankInterval = null
-    this.timer = null
-    this.timeTicket = null
+    this.destroy()
   },
   created() {
-    this.getLibBookTotal()
+    // this.getLibBookTotal()
     this.getReadRanking()
     this.getLendingTotal()
   },
   activated() {
     this.getLibBookTotal()
+    if (this.rankingData.length !== 0) {
+      this.currentHover = -1
+      this.rankInterval = setInterval(() => {
+        this.currentHover = (this.currentHover + 1) % this.rankingData.length
+      }, 1000)
+    }
+    this.$nextTick(() => {
+      window.addEventListener('resize', debounce(this.resize, 2000))
+    })
+  },
+  deactivated() {
+    this.destroy()
   },
   mounted() {
   },
   methods: {
+    destroy() {
+      window.removeEventListener('resize', this.resize)
+      clearTimeout(this.timeTicket)
+      clearInterval(this.rankInterval)
+      clearInterval(this.timer)
+      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
@@ -244,7 +259,6 @@ export default {
 
         this.getUserTotal()
           .then(userTotals => {
-            // console.log('userTotals', userTotals)
             userTotals.forEach(userTotal => {
               const libCode = Object.keys(userTotal)[0]
               const count = userTotal[libCode]
@@ -348,7 +362,7 @@ export default {
           }).sort((a, b) => a.sort - b.sort)
 
           this.libInfoData = updatedLibraries
-          console.log('this.libInfoData', this.libInfoData)
+          // console.log('this.libInfoData', this.libInfoData)
           if (localStorage.getItem('countItem')) {
             this.count = parseInt(localStorage.getItem('countItem'))
           } else {

src/views/pageFour/index.vue

@@ -20,13 +20,15 @@
                 class="tsgz-video"
                 width="100%"
                 height="100%"
-                controls="controls"
+                controls
+                preload="auto"
                 :src="item.cover"
                 :poster="poster"
                 autoplay
                 type="video/mp4"
                 muted
                 @ended="playNextVideo(index)"
+                @loadedmetadata="playVideo"
               >
                 您的浏览器不支持 video 标签。
               </video>
@@ -135,19 +137,24 @@ export default {
   computed: {
   },
   beforeDestroy() {
-    clearInterval(this.rankInterval)
-    localStorage.setItem('videoIndex', this.videoIndex)
-    localStorage.setItem('videoCurrentTime', this.$refs.videos[this.videoIndex].currentTime)
-    localStorage.setItem('noticeIndex', this.noticeIndex)
-    this.$refs.videos[this.videoIndex].pause()
+    this.destroy()
   },
   created() {
-    this.getVideoResource()
     this.getNotice()
     this.getBookRanking()
   },
   activated() {
+    this.getVideoResource()
     this.load()
+    if (this.rankingData.length !== 0) {
+      this.currentHover = -1
+      this.rankInterval = setInterval(() => {
+        this.currentHover = (this.currentHover + 1) % this.rankingData.length
+      }, 1000)
+    }
+  },
+  deactivated() {
+    this.destroy()
   },
   mounted() {
     // 二维码部分
@@ -166,11 +173,25 @@ export default {
   },
   methods: {
     load() {
-      const video = this.$refs.videos
-      if (video) {
-        video.load()
+      const videos = this.$refs.videos
+      if (videos) {
+        videos[this.videoIndex].load()
+        videos[this.videoIndex].currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0
+        // videos[this.videoIndex].pause()
+        // setTimeout(() => {
+        //   // videos[this.videoIndex].play()
+        // }, 2000)
       }
     },
+    destroy() {
+      clearInterval(this.rankInterval)
+      localStorage.setItem('videoIndex', this.videoIndex)
+      localStorage.setItem('videoCurrentTime', this.$refs.videos[this.videoIndex].currentTime)
+      localStorage.setItem('noticeIndex', this.noticeIndex)
+      this.$refs.videos[this.videoIndex].pause()
+
+      this.rankInterval = null
+    },
     getInitData() {
       // wecharQrCode 二维码 用/downloadFile/+wecharQrCode
       const linkSrc = process.env.VUE_APP_BASE_API
@@ -233,13 +254,18 @@ export default {
             setTimeout(() => {
               nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0
               nextVideo.play()
-            }, 1000)
+            }, 2000)
           })
         }
       }).catch(error => {
         console.error('Error', error)
       })
     },
+    playVideo() {
+      this.$refs.videos[this.videoIndex].play().catch(error => {
+        console.error(error)
+      })
+    },
     setActiveItem(index) {
       this.$refs.carousel.setActiveItem(index)
     },

src/views/pageOne/index.vue

@@ -242,7 +242,7 @@ export default {
     }
   },
   async created() {
-    this.getInitData()
+    // this.getInitData()
     this.getMiddleAllData()
     this.getHotSearch()
     this.getNewBook()
@@ -256,7 +256,8 @@ export default {
     this.getInitData()
   },
   deactivated() {
-
+    clearInterval(this.intervalLeft)
+    this.intervalLeft = null
   },
   mounted() {
     if (localStorage.getItem('wecharQrCodeSrc')) {

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="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="height: calc(100% - 20px);">
-          <BarEcharts :chart-weekly-data="chartWeeklyData" />
+        <div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 20px);">
+          <BarEcharts ref="weeklyRef" :chart-weekly-data="chartWeeklyData" />
         </div>
       </div>
     </div>
@@ -161,11 +161,26 @@ export default {
     this.rankInterval = null
   },
   created() {
+
+  },
+  activated() {
     this.getLendingTotal()
     this.getTodayJH()
-    this.getWeekJH()
+    // if (this.rankingYearWithPercentage.length !== 0) {
+    //   this.currentHover = -1
+    //   this.rankInterval = setInterval(() => {
+    //     this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
+    //   }, 1000)
+    // }
+  },
+  deactivated() {
+    clearInterval(this.rankInterval)
+    this.rankInterval = null
   },
   mounted() {
+    // this.getLendingTotal()
+    // this.getTodayJH()
+    this.getWeekJH()
   },
   methods: {
     paddingNum(num, length) {
@@ -176,6 +191,8 @@ export default {
     },
     // 获取本年今年借阅情况
     getLendingTotal() {
+      this.todayTotal = []
+      this.yearTotal = []
       FetchLendingTotal().then(res => {
         const result = JSON.parse(res.data)
         if (result.success & result.resultlist.length !== 0) {
@@ -212,6 +229,9 @@ export default {
 
           this.$parent.timedRefresh(this.todayTotal, 'todayTotal')
           this.$parent.timedRefresh(this.yearTotal, 'yearTotal')
+
+          console.log('this.todayTotal', this.todayTotal)
+          console.log('this.yearTotal', this.yearTotal)
         } else {
           this.todayTotal = []
           this.yearTotal = []