fix: 增加map向实体详情跳转的入口

2024-10-15 15:50:53 +08:00
parent 5e9a93c7d9
commit 02113299be
11 changed files with 111 additions and 37 deletions
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -129,5 +129,6 @@
  font-size: 12px;
  color: #353636;
  font-weight: 400;
+  line-height: 12px;
  margin-top: -2px !important;
 }
--- a/src/assets/css/components/views/location/location.scss
+++ b/src/assets/css/components/views/location/location.scss
@@ -524,6 +524,12 @@ $color-highlight: #CC4444;

                .header__title {
                  font-size: 16px;
+
+                  i {
+                    margin-left: 10px;
+                    font-size: 12px;
+                    cursor: pointer;
+                  }
                }

                .header__content {
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -380,6 +380,7 @@ export const api = {
    count: apiVersion + '/locationIntelligence/active/count',
    baseStation: apiVersion + '/locationIntelligence/baseStation',
    list: apiVersion + '/locationIntelligence/list',
+    totalCount: apiVersion + '/locationIntelligence/list/count',
    followedSubscriber: apiVersion + '/locationIntelligence/followed/subscribers',
    tracking: apiVersion + '/locationIntelligence/trace/tracking',
    follow: apiVersion + '/locationIntelligence/follow',
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -7,18 +7,18 @@
          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
          Score:{{score}}
-          </div>
-          <div v-if="showEntityDetail" class="panel-show-detail">
-            <el-tooltip
-                effect="light"
-                trigger="hover"
-                :content="$t('entity.jumpToEntityDetails')"
-                placement="right"
-                popper-class="panel-tooltip"
-            >
-              <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail"></i>
-            </el-tooltip>
-          </div>
+        </div>
+        <div v-if="showEntityDetail" class="panel-show-detail">
+          <el-tooltip
+              effect="light"
+              trigger="hover"
+              :content="$t('entity.jumpToEntityDetails')"
+              placement="right"
+              popper-class="panel-tooltip"
+          >
+            <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail"></i>
+          </el-tooltip>
+        </div>
      </div>
      <div class="panel__tools">
        <el-select
@@ -528,7 +528,10 @@ export default {
        path: '/entity/detail',
        query: {
          entityType: this.entityType,
-          entityName: this.entityValue
+          entityName: this.entityValue,
+          startTime: this.timeFilter.startTime,
+          endTime: this.timeFilter.endTime,
+          range: this.timeFilter.dateRangeValue
        }
      })
      window.open(href, '_blank')
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -192,6 +192,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'
 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>'

@@ -749,6 +750,7 @@ export default {
      this.trackingHumanMarker = new maplibregl.Marker({ element: el }).setLngLat(coordinates).addTo(this.mapChart)
    },
    renderTrackingHexagon () {
+      this.bindTrackingHexagonEvents()
      if (!this.currentShowSubscriber) {
        return true
      }
@@ -788,7 +790,6 @@ export default {
        // 最后所在地的图标
        const coordinate = h3ToGeo(currentShowSubscriberRecords[0].hexId)
        this.renderTrackingMarker([coordinate[1], coordinate[0]])
-        this.bindTrackingHexagonEvents()
      }
    },
    mapLineDataConverter () {
@@ -917,11 +918,22 @@ export default {
    }
  },
  setup () {
-    const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.subscriberMap || 60
+    const { query } = useRoute()
+    // 获取url携带的range、startTime、endTime
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime
+
+    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberMap || 60)
    const timeFilter = ref({ dateRangeValue })
-    const { startTime, endTime } = getNowTime(dateRangeValue)
-    timeFilter.value.startTime = startTime
-    timeFilter.value.endTime = endTime
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(dateRangeValue)
+      timeFilter.value.startTime = startTime
+      timeFilter.value.endTime = endTime
+    } else {
+      timeFilter.value.startTime = parseInt(startTimeParam)
+      timeFilter.value.endTime = parseInt(endTimeParam)
+    }

    const currentPoint = ref({})
    const tooltip = ref({
--- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue
@@ -140,9 +140,12 @@ export default {
    const queryCondition = ref(query.queryCondition || '')

    // 获取url携带的range、startTime、endTime
-    const rangeParam = query.kpiRange
+    /*const rangeParam = query.kpiRange
    const startTimeParam = query.kpiStartTime
-    const endTimeParam = query.kpiEndTime
+    const endTimeParam = query.kpiEndTime*/
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberKpi || 60)
--- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue
@@ -67,9 +67,12 @@ export default {
    const queryCondition = ref(query.queryCondition || '')

    // 获取url携带的range、startTime、endTime
-    const rangeParam = query.topAppRange
+    /*const rangeParam = query.topAppRange
    const startTimeParam = query.topAppStartTime
-    const endTimeParam = query.topAppEndTime
+    const endTimeParam = query.topAppEndTime*/
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberTopApp || 60)
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -641,7 +641,8 @@ export default {
              })
            }
          }).catch(e => {
-            this.$message.error(e.response.data.message)
+            this.$message.error(this.errorMsgHandler(e))
+            console.error(e)
          }).finally(() => {
            this.newFilterData[index].loading = false
            this.newFilterData[index].firstLoad = false
@@ -672,8 +673,10 @@ export default {
        } else {
          this.$message.error(response.data.message)
        }
-      }).catch(() => {
+      }).catch(e => {
        this.listData = []
+        this.$message.error(this.errorMsgHandler(e))
+        console.error(e)
      }).finally(() => {
        this.listLoading = false
      })
@@ -696,6 +699,7 @@ export default {
        }
      }).catch(e => {
        console.error(e)
+        this.$message.error(this.errorMsgHandler(e))
        this.summaryCount = { totalCount: 0, domainCount: 0, ipCount: 0, appCount: 0, subscriberCount: 0 }
      }).finally(() => {
        this.loadingCount = false
@@ -712,6 +716,9 @@ export default {
        if (response.status === 200) {
          this.pageObj.total = response.data.data.result
        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+        console.error(e)
      })
    },
    handleQ (params) {
@@ -739,8 +746,9 @@ export default {
          this.entityAppTotal = response.data.data.appCount
          this.entitySubscriberTotal = response.data.data.subscriberCount
        }
-      }).catch((e) => {
-        this.$message.error(e.response.data.message)
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+        console.error(e)
      }).finally(() => {
        this.loadingDomain = false
        this.loadingIp = false
@@ -756,7 +764,8 @@ export default {
          this.entitySubscriberActive = response.data.data.subscriberCount
        }
      }).catch((e) => {
-        this.$message.error(e.response.data.message)
+        this.$message.error(this.errorMsgHandler(e))
+        console.error(e)
      }).finally(() => {
        this.loadingDomainActive = false
        this.loadingIpActive = false
@@ -853,7 +862,9 @@ export default {
          }
        })
        this.$store.commit('setScoreBase', scoreBase)
-      }).catch(() => {
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+        console.error(e)
      }).finally(() => {
      })
    },
--- a/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue
@@ -105,7 +105,7 @@
 <!--        :loading="loadingMap"-->
 <!--        @getCurrentTimeRange="getCurrentTimeRange"-->
 <!--    ></chart>-->
-    <subscriber-map :entity="entity"></subscriber-map>
+    <subscriber-map :entity="entity" :time-filter="timeFilter"></subscriber-map>
  </div>
 </template>

--- a/src/views/entityExplorer/entityList/detailOverview/SubscriberMap.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/SubscriberMap.vue
@@ -273,11 +273,11 @@ export default {

          if (find) {
            this.trackingSubscriber.trackRecords = find.trackRecords
+            this.moveToCenter(find.trackRecords)
          } else {
            this.trackingSubscriber.trackRecords = []
          }
          this.trackingSubscriber.show = false
-          this.moveToCenter(find.trackRecords)
        } else {
          this.trackingSubscriber.trackRecords = []
        }
@@ -482,6 +482,7 @@ export default {
      this.trackingHumanMarker = new maplibregl.Marker({ element: el }).setLngLat(coordinates).addTo(this.mapChart)
    },
    renderTrackingHexagon () {
+      this.bindTrackingHexagonEvents()
      if (!this.currentShowSubscriber) {
        return true
      }
@@ -521,7 +522,6 @@ export default {
        // 最后所在地的图标
        const coordinate = h3ToGeo(currentShowSubscriberRecords[0].hexId)
        this.renderTrackingMarker([coordinate[1], coordinate[0]])
-        this.bindTrackingHexagonEvents()
      }
    },
    mapLineDataConverter () {
@@ -649,12 +649,13 @@ export default {
      }
    }
  },
-  setup () {
-    const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.subscriberMap || 60
+  setup (props) {
+    /* const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.subscriberMap || 60
    const timeFilter = ref({ dateRangeValue })
    const { startTime, endTime } = getNowTime(dateRangeValue)
    timeFilter.value.startTime = startTime
-    timeFilter.value.endTime = endTime
+    timeFilter.value.endTime = endTime */
+    const timeFilter = ref(_.cloneDeep(props.timeFilter))

    const currentPoint = ref({})
    const tooltip = ref({
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -74,7 +74,7 @@
        </div>
        <!-- subscriber list -->
        <div class="analysis-statistics__title">
-          {{$t('location.subscribers')}}
+          <span>{{$t('location.subscribers')}}&nbsp;&nbsp;{{subscribersTotalCount}}</span>
          <simple-loading :loading="loading.subscriberLoading" placement="right" size="small"></simple-loading>
        </div>
        <div class="analysis-statistics__search">
@@ -111,7 +111,18 @@
                </div>
                <div class="header__right">
                  <div class="header-msisdn">
-                    <div class="header__title">ID</div>
+                    <div class="header__title">
+                      <span>ID</span>
+                      <el-tooltip
+                          effect="light"
+                          trigger="hover"
+                          :content="$t('entity.jumpToEntityDetails')"
+                          placement="right"
+                          popper-class="panel-tooltip"
+                      >
+                        <i class="cn-icon cn-icon-jump-to" @click="jumpEntityDetail(item)" v-show="item.showJumpToEntity"></i>
+                      </el-tooltip>
+                    </div>
                    <div class="header__content">{{$_.get(item, 'subscriberId', '-') || '-'}}</div>
                  </div>
                  <div class="header__operation">
@@ -692,6 +703,19 @@ export default {
      }
      return []
    },
+    jumpEntityDetail (subscriber) {
+      const { href } = this.$router.resolve({
+        path: '/entity/detail',
+        query: {
+          entityType: 'subscriber',
+          entityName: subscriber.subscriberId,
+          startTime: this.timeFilter.startTime,
+          endTime: this.timeFilter.endTime,
+          range: this.timeFilter.dateRangeValue
+        }
+      })
+      window.open(href, '_blank')
+    },
    async queryTraceTracking () {
      if (this.trackingSubscribers.length > 0) {
        this.loading.trackingMapLoading = true
@@ -791,6 +815,7 @@ export default {
      this.mapChart.panTo(center, { duration: 500 })
    },
    renderTrackingHexagon () {
+      this.bindTrackingHexagonEvents()
      if (!this.currentShowSubscriber) {
        return true
      }
@@ -832,7 +857,6 @@ export default {
        const coordinate = h3ToGeo(currentShowSubscriberRecords[0].hexId)
        this.renderTrackingMarker([coordinate[1], coordinate[0]])
      }
-      this.bindTrackingHexagonEvents()
    },
    renderMarker (data, type) {
      let svg
@@ -1286,12 +1310,14 @@ export default {
      }
    },
    subscriberListMouseEnter (subscriber) {
+      subscriber.showJumpToEntity = true
      const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
      if (target) {
        target.addClassName && target.addClassName('map-marker--hover')
      }
    },
    subscriberListMouseLeave (subscriber) {
+      subscriber.showJumpToEntity = false
      const target = this.humanMarkers.find(m => subscriber.subscriberId === m.subscriberId)
      if (target) {
        target.removeClassName && target.removeClassName('map-marker--hover')
@@ -1497,6 +1523,11 @@ export default {
        this.loading.subscriberLoading = true
        // 根据顶部的时间条件查列表，再根据底部时间轴的时间时间来查列表里的subscriber是否在线
        // 加载新数据、时间轴变化时，重新查在线状态
+        await axios.get(api.location.totalCount, { params }).then(async response => {
+          if (response.status === 200) {
+            this.subscribersTotalCount = response.data.data[0].count
+          }
+        })
        await axios.get(api.location.list, { params }).then(async response => {
          if (response.status === 200) {
            this.subscribersList = []
@@ -1962,6 +1993,7 @@ export default {
    const pieColorRamp = ['135,206,250', '63,133,186', '45,65,135', '34,7,90']
    const pieValueRamp = ref([])
    const subscribersList = ref([])
+    const subscribersTotalCount = ref(0)
    const searchValueListShow = ref([])
    const boundaryBox = ref({}) // minLongitude、maxLongitude、minLatitude、maxLatitude
    const boundaryBoxExtreme = ref({}) // minLongitude、maxLongitude、minLatitude、maxLatitude
@@ -2020,6 +2052,7 @@ export default {
      pieColorRamp, // 六边形颜色坡度
      pieValueRamp, // 饼图数值坡度，动态获取
      subscribersList, // Location用户列表
+      subscribersTotalCount, // Location用户总数
      boundaryBox, // 查六边形数据的经纬度范围，minLongitude、maxLongitude、minLatitude、maxLatitude
      boundaryBoxExtreme, // boundaryBox的历史极值，用来判断当前boundaryBox下是否需要查数据
      mapChart, // 地图对象