From a2a617535f41e7a29af71d77d991d0ec200ba8bd Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 23 Oct 2024 19:23:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=90=8E=E8=B7=B3=E5=88=B0trace=E5=B9=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=AD=A4=E8=AE=B0=E5=BD=95=E5=B9=B6=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/entityDetail/EntityDetailMap.vue   | 27 +++++++++++++--
 src/views/location/Index.vue                  | 33 ++++++++++++++++---
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
index 4b46935a..5cf32d65 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="subscriber-map">
     <div class="subscriber-map-header">
-      <div class="subscriber-map-title">{{$t('subscriber.locationTrack')}}</div>
+      <div class="subscriber-map-title">{{$t('subscriber.locationTrack')}}
+        <el-tooltip
+            effect="light"
+            trigger="hover"
+            :content="$t('entity.jumpToTracking')"
+            placement="right"
+            popper-class="panel-tooltip"
+        >
+          <span style="cursor: pointer; margin-left: 12px;"><i style="font-size: 14px;" class="cn-icon cn-icon-jump-to" @click="jumpToTrace"></i></span>
+        </el-tooltip>
+      </div>
       <date-time-range
           class="entity-detail-date-time-range"
           :start-time="timeFilter.startTime"
@@ -192,7 +202,7 @@ import { defaultMapConfig, storageKey, unitTypes } from '@/utils/constants'
 import { h3ToGeo, h3ToGeoBoundary } from 'h3-js'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import Loading from '@/components/common/Loading'
-import {useRoute} from 'vue-router'
+import { useRoute } from 'vue-router'
 const humanSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>'
 const baseStationSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M164.901926 519.585185a391.35763 391.35763 0 0 1-30.151111-152.38637c0-52.527407 10.05037-105.054815 30.151111-152.348445 15.094519-47.29363 45.283556-89.353481 80.516741-126.103703L174.990222 15.17037C129.706667 62.464 94.511407 114.991407 69.328593 178.062222 44.183704 241.095111 34.133333 304.165926 34.133333 367.198815c0 63.070815 10.05037 131.375407 35.19526 189.174518 25.182815 57.799111 60.378074 115.598222 105.661629 162.891852l70.428445-73.576296c-35.233185-36.788148-65.422222-78.810074-80.516741-126.103704z" p-id="8786"></path><path d="M255.469037 477.563259c15.094519 36.788148 35.195259 68.266667 60.340148 94.549334l70.428445-73.576297a233.168593 233.168593 0 0 1-40.201482-57.761185c-5.044148-26.282667-10.088296-47.29363-10.088296-73.576296 0-26.244741 5.044148-47.29363 15.094518-68.266667 5.006222-26.282667 20.100741-42.097778 35.19526-63.070815l-70.428445-73.576296c-25.144889 26.282667-45.24563 57.799111-60.340148 94.587259-15.094519 36.788148-20.100741 73.576296-20.100741 110.364445 0 36.788148 5.006222 73.53837 20.100741 110.326518zM436.527407 367.198815c0 43.538963 33.792 78.810074 75.472593 78.810074s75.472593-35.271111 75.472593-78.810074c0-43.501037-33.792-78.810074-75.472593-78.810074s-75.472593 35.271111-75.472593 78.810074zM637.76237 498.574222l70.428445 73.576297c25.144889-26.282667 45.24563-57.837037 60.340148-94.58726 15.094519-36.788148 20.100741-73.576296 20.100741-110.364444 0-36.788148-5.006222-73.576296-20.100741-110.364445-15.094519-36.750222-35.195259-68.266667-60.340148-94.549333l-70.428445 73.576296c15.094519 15.739259 30.189037 36.788148 40.201482 57.799111 10.088296 21.010963 15.132444 47.29363 15.132444 68.266667 0 26.282667-5.044148 47.331556-15.094518 68.342519-10.05037 31.516444-25.144889 47.29363-40.239408 68.266666z" p-id="8787"></path><path d="M954.671407 178.062222C929.488593 114.991407 894.293333 62.464 849.009778 15.17037L778.619259 88.746667c35.233185 36.788148 60.378074 78.810074 80.516741 126.103703 20.100741 47.255704 30.151111 99.821037 30.151111 152.348445 0 52.565333-10.05037 105.092741-30.151111 152.38637-20.100741 47.29363-45.283556 89.315556-80.516741 126.103704l70.428445 73.576296c45.283556-47.29363 80.478815-99.858963 105.661629-162.891852 25.144889-63.070815 35.195259-126.103704 35.19526-189.174518 0-63.032889-10.05037-131.337481-35.19526-189.136593zM210.185481 1024h603.629038L512 551.10163 210.185481 1024z m186.102519-105.054815L512 740.238222l115.674074 178.631111h-231.348148z"></path></svg>'
 
@@ -333,6 +343,18 @@ export default {
       }
       return []
     },
+    jumpToTrace () {
+      const { href } = this.$router.resolve({
+        path: '/location/tracking',
+        query: {
+          sid: this.entityValue,
+          startTime: this.timeFilter.startTime,
+          endTime: this.timeFilter.endTime,
+          range: this.timeFilter.dateRangeValue
+        }
+      })
+      window.open(href, '_blank')
+    },
     queryData () {
       /* return new Promise((resolve, reject) => {
         resolve({
@@ -975,6 +997,7 @@ export default {
       timeFilter,
       currentPoint,
       tooltip,
+      activeTab: ref('traceTracking'),
       maxZoom: mapConfig.maxZoom, // 地图最小缩放比例
       minZoom: mapConfig.minZoom, // 地图最大缩放比例
       currentZoom: ref(null),
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 1081ca93..5d1f438a 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -49,6 +49,7 @@
           class="analysis-statistics-arrow analysis-statistics-arrow--left"
           :class="leftExpanded ? 'analysis-statistics-arrow--left-expanded' : ''"
           @click="leftExpanded = !leftExpanded"
+          v-show="activeTab === 'locationMap'"
       >
         <ArrowLeft v-if="leftExpanded"/>
         <ArrowRight v-else />
@@ -57,6 +58,7 @@
           class="analysis-statistics-arrow analysis-statistics-arrow--right"
           :class="rightExpanded ? 'analysis-statistics-arrow--right-expanded' : ''"
           @click="rightExpanded = !rightExpanded"
+          v-show="activeTab === 'locationMap'"
       >
         <ArrowRight v-if="rightExpanded"/>
         <ArrowLeft v-else />
@@ -220,7 +222,7 @@
         <div style="position: absolute; bottom: 0; height: 40px; width: 100%; background-color: rgba(255,255,255,.8);"></div>
       </div>
       <!-- 右侧数据栏-trace -->
-      <div class="analysis-statistics" id="subscribersBlock" v-show="activeTab === 'traceTracking'">
+      <div class="analysis-statistics" :style="activeTab === 'traceTracking' ? 'overflow-y: scroll' : ''" id="subscribersBlock" v-show="activeTab === 'traceTracking'">
         <div class="analysis-statistics__no-tracking-tip" v-if="trackingSubscribers.length === 0" @click="activeTab = 'locationMap'">{{$t('location.noTrackingYet')}}</div>
         <div class="analysis-statistics__subscribers">
           <template v-for="(subscriber, index) in trackingSubscribers" :key="subscriber.subscriberId">
@@ -608,6 +610,27 @@ export default {
       await this.renderActiveSubscribersLine()
     },
     async initTraceTrackingTab () {
+      if (this.idFromUrl) {
+        const find = this.trackingSubscribers.find(s => s.subscriberId === this.idFromUrl)
+        if (find) {
+          this.currentShowSubscriber = find
+        } else {
+          const queryResult = await axios.get(`${api.entity.basicInfo}/subscriber?resource=${this.idFromUrl}`)
+          const newRecord = {
+            ...queryResult.data.data,
+            subscriberId: this.idFromUrl,
+            phoneNumber: queryResult.data.data.phone_number,
+            show: true,
+            showLine: true,
+            scrollStartIndex: 1,
+            scrollEndIndex: 6,
+            startOffset: 0,
+            listHeight: 0
+          }
+          this.trackingSubscribers.push(newRecord)
+          this.currentShowSubscriber = newRecord
+        }
+      }
       await this.queryTraceTracking()
       // 如果未指定展示谁的轨迹，则默认取追踪用户中的第一个
       if (!this.currentShowSubscriber && this.trackingSubscribers.length > 0) {
@@ -1192,7 +1215,7 @@ export default {
           this.showBaseStation()
         }
       } else if (this.activeTab === 'locationMap') {
-        if (this.currentZoom >= 9 && this.updateBoundaryBox()) {
+        if (this.currentZoom >= 9 && this.mapChart.getSource('hexGrid') && this.updateBoundaryBox()) {
           const oldSourceData = this.mapChart.getSource('hexGrid')._data
           const hexagonData = await this.queryHexagon()
           // 将查到的h3hexagon数据转为geojson
@@ -2104,10 +2127,11 @@ export default {
       }
     }
     const { query } = useRoute()
-    // 获取url携带的range、startTime、endTime
+    // 获取url携带的range、startTime、endTime、id(subscriberId)
     const rangeParam = query.range
     const startTimeParam = query.startTime
     const endTimeParam = query.endTime
+    const idParam = query.sid
 
     // 优先级：url > config.js > 默认值。
     const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)
@@ -2205,10 +2229,11 @@ export default {
       activeTab,
       dropDownValue,
       timeFilter,
+      idFromUrl: ref(idParam), // 从url获取的subscriberId
       minuteTimeFilter, // 底下时间轴的时间
       searchList, // 搜索框下拉列表
       leftExpanded: ref(false), // 左右侧栏是否展开
-      rightExpanded: ref(true),
+      rightExpanded: ref(false),
       tooltip, // 控制鼠标悬浮框
       pieColorRamp, // 六边形颜色坡度
       pieValueRamp, // 饼图数值坡度，动态获取