From 02113299bec3beb4f4ae3a715a102c65157c8a99 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Tue, 15 Oct 2024 15:50:53 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0map=E5=90=91=E5=AE=9E?= =?UTF-8?q?=E4=BD=93=E8=AF=A6=E6=83=85=E8=B7=B3=E8=BD=AC=E7=9A=84=E5=85=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/views/charts2/panel.scss | 1 + .../components/views/location/location.scss | 6 +++ src/utils/api.js | 1 + src/views/charts2/Panel.vue | 29 +++++++------- .../charts/entityDetail/EntityDetailMap.vue | 22 ++++++++--- .../EntityDetailSubscriberKpi.vue | 7 +++- .../EntityDetailSubscriberTopApp.vue | 7 +++- src/views/entityExplorer/EntityExplorer.vue | 23 ++++++++--- .../entityList/detailOverview/Subscriber.vue | 2 +- .../detailOverview/SubscriberMap.vue | 11 +++--- src/views/location/Index.vue | 39 +++++++++++++++++-- 11 files changed, 111 insertions(+), 37 deletions(-) diff --git a/src/assets/css/components/views/charts2/panel.scss b/src/assets/css/components/views/charts2/panel.scss index 5e8d9f58..c094c480 100644 --- 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; } diff --git a/src/assets/css/components/views/location/location.scss b/src/assets/css/components/views/location/location.scss index 506fe40b..9be33b48 100644 --- 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 { diff --git a/src/utils/api.js b/src/utils/api.js index 3c95787e..b80dc7fc 100644 --- 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', diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index f3bec690..d88d0ade 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -7,18 +7,18 @@
Score:{{score}} - -
- - - -
+ +
+ + + +
config.js > 默认值。 const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberKpi || 60) diff --git a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue index b7abf6ff..2cb9d7da 100644 --- 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) diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue index d7696d40..1a236445 100644 --- 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(() => { }) }, diff --git a/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue b/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue index 223335e9..68ad15f1 100644 --- a/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue +++ b/src/views/entityExplorer/entityList/detailOverview/Subscriber.vue @@ -105,7 +105,7 @@ - +
diff --git a/src/views/entityExplorer/entityList/detailOverview/SubscriberMap.vue b/src/views/entityExplorer/entityList/detailOverview/SubscriberMap.vue index 0f994936..c9044833 100644 --- 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({ diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue index 96c6bb1f..0e557312 100644 --- a/src/views/location/Index.vue +++ b/src/views/location/Index.vue @@ -74,7 +74,7 @@
- {{$t('location.subscribers')}} + {{$t('location.subscribers')}}  {{subscribersTotalCount}}
@@ -111,7 +111,18 @@
-
ID
+
+ ID + + + +
{{$_.get(item, 'subscriberId', '-') || '-'}}
@@ -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, // 地图对象