From 5768cca2ff291aaf8e3f814f639899c2a840ddda Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Mon, 4 Mar 2024 18:21:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20CN-1572=20=20=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E5=91=BD=E5=90=8D=E4=BF=AE=E6=94=B9=E4=B8=BAlocation?=
 =?UTF-8?q?=E5=BC=80=E5=A4=B4=E7=9A=84=EF=BC=9B=E5=AE=9E=E7=8E=B0=E5=85=B3?=
 =?UTF-8?q?=E6=B3=A8=E7=94=A8=E6=88=B7=E5=88=97=E8=A1=A8Header=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E7=9A=84=E5=8F=96=E6=B6=88=E5=85=B3=E6=B3=A8=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=EF=BC=9B=E8=A7=A3=E5=86=B3=E9=97=AE=E9=A2=98=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=9F=A5=E8=AF=A2=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E5=BA=95=E9=83=A8=EF=BC=8C=E5=86=8D=E6=AC=A1?=
 =?UTF-8?q?=E8=BF=9B=E5=85=A5=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tools.js           |   6 +-
 src/views/location/Index.vue | 133 ++++++++++++++++++++++++++---------
 2 files changed, 104 insertions(+), 35 deletions(-)

diff --git a/src/utils/tools.js b/src/utils/tools.js
index 3d758756..b0e78efb 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -300,7 +300,7 @@ export const selectLoadMore = {
     const selectDom = document.querySelector('.search-select .el-select-dropdown__wrap')
     function loadMores() {
       //判断是否到底
-      const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
+      const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight + 10
       if(isBase) {
         binding.value && binding.value()
       }
@@ -309,7 +309,9 @@ export const selectLoadMore = {
     el.selectDomInfo = selectDom
     el.selectLoadMore = loadMores
     //监听滚动事件
-    selectDom.addEventListener('scroll',loadMores.bind(selectDom))
+    if(selectDom) {
+      selectDom.addEventListener('scroll',loadMores.bind(selectDom))
+    }
   },
   unmounted (el, binding) {
     // 解除事件监听
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index b0e4c364..16ccb60c 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -39,8 +39,6 @@
             <i class="cn-icon-a-1 cn-icon" v-else></i>
           </span>
         </el-option>
-        <template v-slot:empty >
-        </template>
       </el-select>
       <div class="panel__time">
         <date-time-range
@@ -98,14 +96,27 @@
         <div class="analysis-statistics__subscribers">
           <template v-for="item in followedSubscribersList" :key="item.subscriberId">
             <div class="analysis-statistics__subscriber">
-              <div class="subscriber__header" :class="item.active === 1 ? 'subscriber__header' : 'subscriber__header--inactive'" >
+              <div class="subscriber__header" :class="item.active === 1 ? '' : 'subscriber__header-inactive'" >
                 <div class="header__icon">
                   <div class="icon__box">
                     <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M366.689524 690.468571l87.283809 83.821715-75.434666 195.486476c-10.971429 27.794286-43.105524 42.081524-72.265143 32.036571-29.159619-10.24-44.080762-41.252571-33.450667-69.241904L366.689524 690.468571zM203.824762 476.306286l51.785143-95.183238a162.279619 162.279619 0 0 1 59.245714-59.977143c119.710476-68.266667 134.777905-67.291429 149.942857-66.218667l80.798476 5.168762c24.868571 0.975238 42.081524 7.314286 125.025524 124.14781a21.26019 21.26019 0 0 0 14.092191 8.289523l99.132952 14.482286c12.873143 1.852952 24.478476 8.582095 32.182857 18.67581a45.494857 45.494857 0 0 1 8.825905 35.108571 46.665143 46.665143 0 0 1-19.504762 30.866286 50.468571 50.468571 0 0 1-36.571429 8.435809l-99.181714-14.433524a119.954286 119.954286 0 0 1-79.774476-47.640381c-4.388571-6.241524-7.558095-11.361524-11.849143-16.579047l-63.634286 193.487238 88.405334 84.845714c12.970667 12.385524 23.698286 29.013333 30.232381 45.494857l67.876571 190.366477c5.022476 13.409524 4.193524 28.233143-2.291809 41.057523a54.613333 54.613333 0 0 1-32.182858 27.160381c-5.851429 2.048-12.092952 3.120762-18.383238 3.169524a58.075429 58.075429 0 0 1-53.930666-36.181333l-67.876572-190.366476c-1.024-2.096762-2.096762-3.120762-3.218285-5.168762L365.616762 623.177143a84.894476 84.894476 0 0 1-24.868572-80.700953l34.523429-146.919619c-3.413333 2.340571-7.070476 4.388571-10.776381 6.290286a58.806857 58.806857 0 0 0-22.674286 22.723048L290.133333 519.801905a49.834667 49.834667 0 0 1-43.105523 24.819809 59.977143 59.977143 0 0 1-22.674286-5.12 46.518857 46.518857 0 0 1-20.48-63.146666z m209.67619-360.448C420.08381 58.465524 473.86819 17.066667 533.650286 23.30819 593.383619 29.549714 636.537905 81.13981 630.00381 138.48381c-6.534095 57.392762-60.269714 98.840381-120.05181 92.550095-59.782095-6.241524-102.985143-57.782857-96.451048-115.175619z" fill="#ffffff"></path></svg>
                   </div>
                 </div>
-                <div class="header__title">MSISDN</div>
-                <div class="header__content">{{item.subscriberId}}</div>
+                <div class="header__right">
+                  <div class="header-msisdn">
+                    <div class="header__title">MSISDN</div>
+                    <div class="header__content">{{item.subscriberId}}</div>
+                  </div>
+                  <div class="header__operation">
+                    <div class="trajectory-text">
+                        <i class="cn-icon-a-1 cn-icon"></i>Trajectory
+                    </div>
+                    <div class="cancle-follow" @click.stop="cancleFollowSubscribers(item)">
+                      <i class="cn-icon-close cn-icon"></i>
+                    </div>
+                  </div>
+                </div>
+
               </div>
               <div class="subscriber__body">
                 <div class="body__item">
@@ -333,7 +344,8 @@ export default {
       activeCount: '',
       activeCountChain: '',
       curPageNum: 1,
-      activeNames: ''
+      activeNames: '',
+      isLoadingMore: false
     }
   },
   components: {
@@ -418,9 +430,9 @@ export default {
       this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
 
       /* 右侧关注列表 */
-      await this.queryFollowedList()
+      this.queryFollowedList()
       /* 右上角折线图 */
-      await this.renderActiveSubscribersLine()
+      this.renderActiveSubscribersLine()
     },
     async initTraceTrackingTab () {
       await this.queryTraceTracking()
@@ -446,6 +458,7 @@ export default {
         this.pieValueRamp = this.calculateValueRamp(densityData)
         const option = _.cloneDeep(pieOption)
         option.color = this.pieColorRamp.map(c => `rgb(${c})`)
+        option.series[0].name = this.$t('location.populationDensity')
         option.series[0].data = this.pieValueRamp.map((r, i) => ({
           name: `${r.start}~${r.end}`,
           value: r.count
@@ -1012,18 +1025,35 @@ export default {
         }
         this.loading.searchLoading = true
         try {
-          axios.get(api.location.list, { params }).then(async response => {
+          this.isLoadingMore = true
+          await axios.get(api.location.list, { params }).then(async response => {
             if (response.status === 200) {
-              this.searchValueListShow = this.searchValueListShow.concat(response.data.data)
-              if (response.data.data.length === 0) {
+              if(this.curPageNum === 1) {
+                this.searchValueListShow = response.data.data
+              } else {
+                this.searchValueListShow = this.searchValueListShow.concat(response.data.data)
+              }
+              if (response.data.data.length === 0 && this.curPageNum > 1) {
                 this.curPageNum--
               }
+              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 (dom && dom[1]) {
+                      dom[1].style = "transform: translateY(0%) !important;"
+                    }
+                  }
+                })
+              }
             }
           })
         } catch (e) {
           this.errorMsgHandler(e)
           console.error(e)
         } finally {
+          this.isLoadingMore = false
           this.loading.searchLoading = false
         }
       }
@@ -1031,17 +1061,29 @@ export default {
     changeValue (item) {
     },
     changeSearchValue (value) {
-      const selectDom = document.querySelector('.search-select .el-scrollbar__wrap')
-      if (selectDom) {
-        selectDom.scrollTo({ top: 0, behavior: 'smooth' })
-      }
     },
     searchBlur () {
+
     },
     searchFocus () {
     },
     onLoadMore () {
-      this.initDropdownList(this.curSearchValue)
+      if(!this.isLoadingMore) {
+        this.initDropdownList(this.curSearchValue)
+      }
+    },
+    cancleFollowSubscribers(item) {
+      axios.delete(api.location.follow + '?subscriberId=' + item.subscriberId).then(res => {
+        if (res.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          /* 刷新右侧关注列表 */
+          this.queryFollowedList()
+        } else {
+          this.$message.error(res.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+      })
     },
     followSubscribers (item) {
       if (item.follow === 1) {
@@ -1074,21 +1116,12 @@ export default {
     },
     visibleChange (state) {
       this.searchValueListShow = []
-      if (!state) {
-        const selectDom = document.querySelector('.search-select .el-scrollbar__wrap')
-        if (selectDom) {
-          selectDom.scrollTo({ top: 0, behavior: 'smooth' })
-        }
-      }
     },
     dropDownSearch (curVal) {
+      //this.isLoadingMore = false
       this.curSearchValue = curVal
       this.curPageNum = 1
       this.searchValueListShow = []
-      const selectDom = document.querySelector('.search-select .el-scrollbar__wrap')
-      if (selectDom) {
-        selectDom.scrollTo({ top: 0, behavior: 'smooth' })
-      }
       this.initDropdownList(curVal)
     },
     mapTimeLineChange (timeFilter) {
@@ -1381,7 +1414,6 @@ export default {
 }
 .search-select .el-scrollbar__wrap{
   max-height: 150px;
-  //height: 100px;
   overflow-y:auto;
 }
 .geo-analysis {
@@ -1642,7 +1674,7 @@ export default {
           border: 1px solid rgb(226,229,236);
           border-radius: 2px;
 
-          .subscriber__header--inactive {
+          .subscriber__header-inactive {
             background-color: #CCCCCC;
           }
           .subscriber__header {
@@ -1671,12 +1703,47 @@ export default {
                 border-radius: 50%;
               }
             }
-            .header__title {
-              font-size: 16px;
-            }
-            .header__content {
-              font-size: 14px;
+            .header__right {
+              display:flex;
+              flex-direction: row;
+              justify-content: space-between;
+              .header-msisdn {
+                display:flex;
+                flex-direction: column;
+                .header__title {
+                  font-size: 16px;
+                }
+                .header__content {
+                  font-size: 14px;
+                }
+              }
+              .header__operation {
+                display:flex;
+                flex-direction: row;
+                align-items: center;
+                .trajectory-text {
+                  margin-right:12px;
+                  font-family: Helvetica-Bold;
+                  font-size: 12px;
+                  color: #233447;
+                  font-weight: 700;
+                  i {
+                    font-size: 12px !important;
+                    font-weight: bolder;
+                    margin-right:3px;
+                    color: #233447;
+                  }
+                }
+                .cancle-follow {
+                  margin-right:14px;
+                  i {
+                    cursor: pointer;
+                    font-size:8px;
+                  }
+                }
+              }
             }
+
           }
           .subscriber__body {
             padding: 10px 18px;