CN-1713 feat: entity支持subscriber tag

2024-10-28 22:19:41 +08:00
parent 3afe4647c2
commit c6200c12b5
6 changed files with 105 additions and 31 deletions
--- a/src/assets/css/components/views/location/location.scss
+++ b/src/assets/css/components/views/location/location.scss
@@ -16,6 +16,23 @@ $color-highlight: #CC4444;
  padding: 0 20px 20px;
  position: relative;

+  .subscriber-tags {
+    display: flex;
+    flex-wrap: wrap;
+
+    .subscriber-tag {
+      display: flex;
+      justify-content: center;
+      margin: 0 6px 6px 0;
+      height: 20px;
+      line-height: 20px;
+      padding: 0 6px;
+      font-size: 12px;
+      border: 1px solid;
+      border-radius: 2px;
+    }
+  }
+
  .location-tabs {
    .traceTracking-tabs_label {
      display: flex;
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -334,6 +334,7 @@ export const api = {
      subscriberBasicInfo: apiVersion + '/entity/explorer/detail/basic/subscriber', // subscriber实体响应
      domainTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/domain', // Domain实体标签响应结果
      ipTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/ip', // ip实体标签响应结果
+      subscriberTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/subscriber', // ip实体标签响应结果
      domainThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/domain', // 实体流量信息
      ipThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/ip', // 实体流量信息
      appThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/app', // 实体流量信息
--- a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
@@ -130,13 +130,8 @@ export default {
      this.showError = false
      this.levelTwoTags = []
      const basicInfoRequest = axios.get(`${api.entity.basicInfo}/${this.entity.entityType}?resource=${this.entity.entityName}`)
-      let requestArray = []
-      if (this.entity.entityType === entityType.subscriber) {
-        requestArray = [null, basicInfoRequest]
-      } else {
-        const tagRequest = axios.get(`${api.entity.tags}/${this.entity.entityType}?resource=${this.entity.entityName}`)
-        requestArray = [tagRequest, basicInfoRequest]
-      }
+      const tagRequest = axios.get(`${api.entity.tags}/${this.entity.entityType}?resource=${this.entity.entityName}`)
+      const requestArray = [tagRequest, basicInfoRequest]
      Promise.all(requestArray).then(response => {
        const tagData = response[0]
        let tagError = ''
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
@@ -347,7 +347,7 @@ export default {
      const { href } = this.$router.resolve({
        path: '/location/tracking',
        query: {
-          sid: this.entityValue,
+          subscriberId: this.entity.entityName,
          startTime: this.timeFilter.startTime,
          endTime: this.timeFilter.endTime,
          range: this.timeFilter.dateRangeValue
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -299,8 +299,12 @@ export default {
          url = api.entity.entityList.ipTags
          break
        }
+        case ('subscriber_id'): {
+          url = api.entity.entityList.subscriberTags
+          break
+        }
      }
-      if (this.entity.entityType === 'domain' || this.entity.entityType === 'ip' || this.entity.entityType === 'subscriber') {
+      if (this.entity.entityType === 'domain' || this.entity.entityType === 'ip' || this.entity.entityType === 'subscriber_id') {
        axios.get(`${url}?resource=${this.entity.entityValue}`).then(responese => {
          const res = responese.data
          if (responese.status === 200) {
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -186,6 +186,14 @@
                </div>
              </div>
              <div class="subscriber__body">
+                <span class="subscriber-tags">
+                  <span v-for="tag in item.tags"
+                        :key="tag.value"
+                        class="subscriber-tag"
+                        :style="getTagColor(tag.color)">
+                    {{ tag.value }}
+                  </span>
+                </span>
                <div class="body__item">
                  <div class="item__label">MSISDN</div>
                  <div class="item__value">{{item.phoneNumber}}</div>
@@ -202,14 +210,14 @@
                  <div class="item__label">APN</div>
                  <div class="item__value">{{item.apn || '-'}}</div>
                </div>
-                <div class="body__item">
+<!--                <div class="body__item">
                  <div class="item__label">{{$t('location.group')}}</div>
                  <div class="item__value">Terrorist</div>
                </div>
                <div class="body__item">
                  <div class="item__label">{{$t('overall.info')}}</div>
                  <div class="item__value">Leader</div>
-                </div>
+                </div>-->
                <div class="body__item">
                  <div class="item__label">{{$t('location.location')}}</div>
                  <div class="item__value">{{locationHandler(item)}}</div>
@@ -262,17 +270,29 @@
                </div>
              </div>
              <div class="subscriber__body">
+                <span class="subscriber-tags">
+                  <span v-for="tag in subscriber.tags"
+                        :key="tag.value"
+                        class="subscriber-tag"
+                        :style="getTagColor(tag.color)">
+                    {{ tag.value }}
+                  </span>
+                </span>
                <div class="body__item">
                  <div class="item__label">MSISDN</div>
-                  <div class="item__value">{{subscriber.phoneNumber}}</div>
+                  <div class="item__value">{{subscriber.phoneNumber || '-'}}</div>
                </div>
                <div class="body__item">
-                  <div class="item__label">{{$t('entities.group')}}</div>
-                  <div class="item__value">Terrorist</div>
+                  <div class="item__label">IMEI</div>
+                  <div class="item__value">{{subscriber.imei || '-'}}</div>
                </div>
                <div class="body__item">
-                  <div class="item__label">{{$t('overall.info')}}</div>
-                  <div class="item__value">Leader</div>
+                  <div class="item__label">IMSI</div>
+                  <div class="item__value">{{subscriber.imsi || '-'}}</div>
+                </div>
+                <div class="body__item">
+                  <div class="item__label">APN</div>
+                  <div class="item__value">{{subscriber.apn || '-'}}</div>
                </div>
                <div class="body__item">
                  <div class="item__label">{{$t('overall.location')}}</div>
@@ -372,6 +392,14 @@
        </div>
      </div>
      <div class="hexagon-tooltip__body">
+        <span class="subscriber-tags" v-if="tooltip.type === tooltipType.human">
+          <span v-for="tag in currentSubscriber.tags"
+                :key="tag.value"
+                class="subscriber-tag"
+                :style="getTagColor(tag.color)">
+            {{ tag.value }}
+          </span>
+        </span>
        <template v-if="tooltip.type === tooltipType.hexagon">
          <template v-if="activeTab === 'locationMap'">
            <div class="body__item">
@@ -397,28 +425,28 @@
        <template v-else-if="tooltip.type === tooltipType.human">
          <div class="body__item">
            <div class="item__label">MSISDN</div>
-            <div class="item__value">{{currentSubscriber.phoneNumber}}</div>
+            <div class="item__value">{{currentSubscriber.phoneNumber || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">IMEI</div>
-            <div class="item__value">{{currentSubscriber.imei}}</div>
+            <div class="item__value">{{currentSubscriber.imei || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">IMSI</div>
-            <div class="item__value">{{currentSubscriber.imsi}}</div>
+            <div class="item__value">{{currentSubscriber.imsi || '-'}}</div>
          </div>
          <div class="body__item">
            <div class="item__label">APN</div>
-            <div class="item__value">{{currentSubscriber.apn}}</div>
+            <div class="item__value">{{currentSubscriber.apn || '-'}}</div>
          </div>
-          <div class="body__item">
+<!--          <div class="body__item">
            <div class="item__label">{{$t('entities.group')}}</div>
            <div class="item__value">Terrorist</div>
          </div>
          <div class="body__item">
            <div class="item__label">{{$t('overall.info')}}</div>
            <div class="item__value">Leader</div>
-          </div>
+          </div>-->
          <div class="body__item">
            <div class="item__label">{{$t('overall.location')}}</div>
            <div class="item__value">{{locationHandler(currentSubscriber)}}</div>
@@ -465,13 +493,20 @@ import maplibregl from 'maplibre-gl'
 import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-import { unitTypes, storageKey, defaultMapConfig, mapLevelField } from '@/utils/constants'
+import {
+  unitTypes,
+  storageKey,
+  defaultMapConfig,
+  mapLevelField,
+  intentColor,
+  entityDefaultColor
+} from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
 import { pieOption } from '@/views/location/chartOption'
 import _ from 'lodash'
 import { useRoute, useRouter } from 'vue-router'
-import { urlParamsHandler, overwriteUrl, getTextRect } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, getTagColor } from '@/utils/tools'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { h3ToGeo, h3ToGeoBoundary } from 'h3-js'
@@ -523,6 +558,7 @@ export default {
    MyFollowBox
  },
  methods: {
+    getTagColor,
    dateFormatByAppearance,
    valueToRangeValue,
    async initMap () {
@@ -627,6 +663,12 @@ export default {
            startOffset: 0,
            listHeight: 0
          }
+          const queryResult2 = await axios.get(`${api.entity.tags}/subscriber?resource=${this.idFromUrl}`)
+          if (queryResult2.data.data && queryResult2.data.data.tags) {
+            newRecord.tags = queryResult2.data.data.tags.map(tag => {
+              return { value: tag.name, color: intentColor[tag.intent] || entityDefaultColor }
+            })
+          }
          this.trackingSubscribers.push(newRecord)
          this.currentShowSubscriber = newRecord
        }
@@ -1511,6 +1553,7 @@ export default {
          this.opacity = 1
        }
      }, 16)
+      console.info(this.trackingSubscribers)
    },
    // 追踪页删除追踪
    removeTrackingSubscriber (subscriber) {
@@ -1642,14 +1685,28 @@ export default {
                })
              }
              this.renderMarker(response.data.data, this.tooltipType.human)
-              /* // 给所有active的subscriber添加marker
-              const toRenderMarkerSubscribers = response.data.data.filter(r => {
-                return !this.humanMarkers.some(m => m.subscriberId === r.subscriberId)
-              })
-              this.renderMarker(toRenderMarkerSubscribers, this.tooltipType.human) */
            }
          }
        })
+        // 异步查tag，避免阻塞
+        setTimeout(() => {
+          this.subscribersList.forEach(s => {
+            if (!s.tags) {
+              s.tags = []
+              /*s.tags = [{ value: 'testTag', color: intentColor.Info },
+                { value: 'testTag', color: intentColor.Benign }, { value: 'testTagttt', color: intentColor.Malicious }]*/
+              axios.get(`${api.entity.tags}/subscriber`, { params: { resource: s.subscriberId } }).then(response => {
+                if (response.status === 200) {
+                  if (response.data.data && response.data.data.tags) {
+                    s.tags = response.data.data.tags.map(tag => {
+                      return { value: tag.name, color: intentColor[tag.intent] || entityDefaultColor }
+                    })
+                  }
+                }
+              })
+            }
+          })
+        }, 200)
      } catch (e) {
        this.$message.error(this.errorMsgHandler(e))
        console.error(e)
@@ -1985,7 +2042,7 @@ export default {
    trackingSubscribers: {
      deep: true,
      handler (n) {
-        sessionStorage.setItem(storageKey.trackingSubscribers, JSON.stringify(n.map(item => ({ subscriberId: item.subscriberId, phoneNumber: item.phoneNumber, country: item.country, superAdministrativeArea: item.superAdministrativeArea, administrativeArea: item.administrativeArea }))))
+        sessionStorage.setItem(storageKey.trackingSubscribers, JSON.stringify(n))
      }
    },
    // 控制map loading
@@ -2131,7 +2188,7 @@ export default {
    const rangeParam = query.range
    const startTimeParam = query.startTime
    const endTimeParam = query.endTime
-    const idParam = query.sid
+    const idParam = query.subscriberId

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)