From d82e700d55fafcba8d1e2f82924bee90810b2f89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 6 Mar 2024 18:46:35 +0800
Subject: [PATCH] =?UTF-8?q?CN-1573=20feat:=20=E8=BF=BD=E8=B8=AA=E9=A1=B5?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BA=BF=E6=B7=BB=E5=8A=A0=E6=87=92=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/location/Index.vue | 54 ++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 13734417..25b7e294 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -223,8 +223,8 @@
                           </div>
                         </div>
                       </div>
-                      <el-timeline v-show="subscriber.show" :class="subscriber.show ? '' : 'el-timeline--hide'">
-                        <template v-for="(record, index) in trackingSubscriberRecordMap[subscriber.subscriberId]">
+                      <el-timeline :id="subscriber.subscriberId" v-show="subscriber.show" :class="subscriber.show ? '' : 'el-timeline--hide'">
+                        <template v-for="(record, index) in trackingSubscriberRecordMap[subscriber.subscriberId].slice(0, subscriber.scrollNum)">
                           <el-timeline-item
                               :key="index"
                               v-if="index > 0"
@@ -698,6 +698,12 @@ export default {
           // 计算停留时间
           this.trackingSubscribers.forEach(s => {
             const trackRecords = this.trackingSubscriberRecordMap[s.subscriberId]
+            if (trackRecords.length < 20) {
+              s.scrollNum = trackRecords.length
+            } else {
+              s.scrollNum = 20
+            }
+
             if (trackRecords && trackRecords.length > 0) {
               for (let i = 0; i < trackRecords.length; i++) {
                 if (i > 0) {
@@ -828,8 +834,8 @@ export default {
         .addTo(this.mapChart)
     },
     updateBoundaryBox () {
-      const boundaryBox = this.mapChart.getBounds()
-      /* this.boundaryBox = {
+      /* const boundaryBox = this.mapChart.getBounds()
+        this.boundaryBox = {
         maxLongitude: boundaryBox.getEast(),
         maxLatitude: boundaryBox.getNorth(),
         minLongitude: boundaryBox.getWest(),
@@ -1026,7 +1032,7 @@ export default {
           this.tooltip.x = originalEvent.clientX + 15
           this.tooltip.y = originalEvent.clientY + 5
           this.tooltip.y = (originalEvent.clientY + 5 + tooltipDomHeight) > this.mapDomHeight ? (this.mapDomHeight - tooltipDomHeight) : (originalEvent.clientY + 5)
-        })*/
+        }) */
 
         // 鼠标滑过高亮
         this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, true)
@@ -1128,7 +1134,8 @@ export default {
       }
     },
     clickTrackBlock (i) {
-      if (this.trackingSubscriberRecordMap[this.trackingSubscribers[i].subscriberId].length > 1) {
+      const length = this.trackingSubscriberRecordMap[this.trackingSubscribers[i].subscriberId].length
+      if (length > 1) {
         this.trackingSubscribers[i].show = !this.trackingSubscribers[i].show
         if (this.trackingSubscribers[i].show) {
           this.trackingSubscribers[i].showLine = true
@@ -1139,6 +1146,23 @@ export default {
           }, 200)
         }
       }
+
+      const dom = document.getElementById(this.trackingSubscribers[i].subscriberId)
+      if (dom) {
+        dom.addEventListener('scroll', (e) => {
+          const clientHeight = e.target.clientHeight
+          const scrollTop = e.target.scrollTop
+          const scrollHeight = e.target.scrollHeight
+          if (scrollTop && _.ceil(clientHeight + scrollTop) >= scrollHeight) {
+            if (this.trackingSubscribers[i].scrollNum < length) {
+              this.trackingSubscribers[i].scrollNum = this.trackingSubscribers[i].scrollNum + 20
+              if (this.trackingSubscribers[i].scrollNum > length) {
+                this.trackingSubscribers[i].scrollNum = length
+              }
+            }
+          }
+        })
+      }
     },
     changeCurrentShowSubscriber (subscriber) {
       if (subscriber.subscriberId !== this.currentShowSubscriber.subscriberId) {
@@ -1152,15 +1176,15 @@ export default {
         const index = this.trackingSubscribers.findIndex(s => s.subscriberId === subscriber.subscriberId)
         this.trackingSubscribers.splice(index, 1)
       } else {
-        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false })
+        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false, scrollNum: 0 })
       }
       this.opacity = 0
       setInterval(() => {
         this.opacity += 0.05
-        if(this.opacity >= 1) {
+        if (this.opacity >= 1) {
           this.opacity = 1
         }
-      },16)
+      }, 16)
     },
     // 追踪页删除追踪
     removeTrackingSubscriber (subscriber) {
@@ -1187,7 +1211,7 @@ export default {
     trackSubscriber (subscriber) {
       const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
       if (!find) {
-        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false })
+        this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false, scrollNum: 0 })
       }
       this.currentShowSubscriber = subscriber
       this.activeTab = 'traceTracking'
@@ -1200,7 +1224,7 @@ export default {
           endTime: this.timeFilter.endTime,
           pageNo: this.curPageNum++,
           pageSize: 10,
-          params: "phone_number like '%"+ curSearchValue +"%'"
+          params: "phone_number like '%" + curSearchValue + "%'"
         }
         try {
           this.loading.searchLoading = true
@@ -1218,8 +1242,8 @@ export default {
               if (params.pageNo === 1) {
                 this.$nextTick(() => {
                   const selectDom = document.getElementsByClassName('el-select-dropdown search-select')
-                  if(selectDom) {
-                    let dom = selectDom[0].getElementsByClassName('el-scrollbar__thumb')
+                  if (selectDom) {
+                    const dom = selectDom[0].getElementsByClassName('el-scrollbar__thumb')
                     if (dom && dom[1]) {
                       dom[1].style = 'transform: translateY(0%) !important;'
                     }
@@ -1233,7 +1257,7 @@ export default {
           console.error(e)
         } finally {
           this.loading.searchLoading = false
-          if(this.searchValueListShow.length === 0) {
+          if (this.searchValueListShow.length === 0) {
             this.emptyTip = 'No Data'
           }
         }
@@ -1519,7 +1543,7 @@ export default {
 
     // 从localStorage中获取数据
     const trackingSubscribers = ref([])
-    sessionStorage.getItem(storageKey.trackingSubscribers) && (trackingSubscribers.value = JSON.parse(sessionStorage.getItem(storageKey.trackingSubscribers)).map(item => ({ ...item, show: false, showLine: false })))
+    sessionStorage.getItem(storageKey.trackingSubscribers) && (trackingSubscribers.value = JSON.parse(sessionStorage.getItem(storageKey.trackingSubscribers)).map(item => ({ ...item, show: false, showLine: false, scrollNum: 0 })))
     /* const test = ['gary6411', 'test6431', 'test6430', 'test6422']
     test.forEach(id => {
       trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false })