人流数据优化

src/views/index.vue

@@ -147,6 +147,24 @@ export default {
         })
       }, 15)
     },
+    clearExistingTimer(type) {
+      if (type === 'middle' && this.middleTimer) {
+        clearInterval(this.middleTimer)
+        this.middleTimer = null
+      } else if (type === 'left' && this.leftTimer) {
+        clearInterval(this.leftTimer)
+        this.leftTimer = null
+      } else if (type === 'device') {
+        clearInterval(this.deviceTimer)
+        this.deviceTimer = null
+      } else if (type === 'todayTotal') {
+        clearInterval(this.todayTimer)
+        this.todayTimer = null
+      } else if (type === 'yearTotal') {
+        clearInterval(this.yearTimer)
+        this.yearTimer = null
+      }
+    },
     // 定时
     initInterval(targetList, time) {
       const { setNumberTransform } = this
@@ -161,6 +179,10 @@ export default {
     },
     // 定时刷新数字翻牌器
     timedRefresh(targetList, type) {
+      // const self = this
+      // 先清除现有定时器
+      this.clearExistingTimer(type)
+
       if (type === 'middle') {
         this.middleTimer = this.initInterval2(targetList, 8000)
       } else if (type === 'left') {

src/views/pageOne/index.vue

@@ -5,10 +5,11 @@
       <div class="database-left">
         <h3 class="database-title">到馆统计</h3>
         <ul class="inLib-num">
+          <!-- , {'lastYearTotal': item.id === 'lastYearTotal'} -->
           <li
-            v-for="(item, index) in leftData"
-            :key="index"
-            :class="[{'totayTotal': item.id === 'totayTotal'}, {'lastYearTotal': item.id === 'lastYearTotal'}]"
+            v-for="item in leftData"
+            :key="item.timestamp"
+            :class="[{'totayTotal': item.id === 'totayTotal'}]"
           >
             <div class="pageLeft-flop-box">
               <div>
@@ -306,29 +307,40 @@ export default {
         }
       )
 
-      this.leftData.push(
-        {
-          // name: '今日到馆',
-          // value: result.todayVisitBase,
-          // type: 1
-          id: 'totayTotal',
-          name: '今日到馆',
-          value: this.$parent.formatter(result.todayVisitBase),
-          valueArr: this.$parent.formatter(result.todayVisitBase).split('')
-        }
-        // {
-        //   id: 'allTotal',
-        //   name: '本年累计到馆',
-        //   value: this.$parent.formatter(result.visitBase),
-        //   valueArr: this.$parent.formatter(result.visitBase).split('')
-        // },
-        // {
-        //   id: 'lastYearTotal',
-        //   name: '去年累计到馆',
-        //   value: this.$parent.formatter(result.lastYearVisitBase),
-        //   valueArr: this.$parent.formatter(result.lastYearVisitBase).split('')
-        // }
-      )
+      // this.leftData.push(
+      //   {
+      //     // name: '今日到馆',
+      //     // value: result.todayVisitBase,
+      //     // type: 1
+      //     id: 'totayTotal',
+      //     name: '今日到馆',
+      //     value: this.$parent.formatter(result.todayVisitBase),
+      //     valueArr: this.$parent.formatter(result.todayVisitBase)
+      //   }
+      //   // {
+      //   //   id: 'allTotal',
+      //   //   name: '本年累计到馆',
+      //   //   value: this.$parent.formatter(result.visitBase),
+      //   //   valueArr: this.$parent.formatter(result.visitBase).split('')
+      //   // },
+      //   // {
+      //   //   id: 'lastYearTotal',
+      //   //   name: '去年累计到馆',
+      //   //   value: this.$parent.formatter(result.lastYearVisitBase),
+      //   //   valueArr: this.$parent.formatter(result.lastYearVisitBase).split('')
+      //   // }
+      // )
+
+      // 更新数据
+      const newData = [{
+        id: 'totayTotal',
+        name: '今日到馆',
+        value: this.$parent.formatter(result.todayVisitBase),
+        valueArr: this.$parent.formatter(result.todayVisitBase).split(''),
+        timestamp: Date.now()
+      }]
+
+      this.$set(this, 'leftData', newData)
 
       this.$parent.timedRefresh(this.leftData, 'left')
     },