CN-1582 fix: 实体列表页增加subscriber内容
This commit is contained in:
刘洪洪
@@ -11,8 +11,11 @@
|
||||
<div class="cn-entity__row">
|
||||
<!--标签-->
|
||||
<div class="cn-entity__header" style="display: flex;">
|
||||
<span class="cn-entity__header-title" v-high-light="keywordList">{{ entityData.entityValue || 'Unknown' }}</span>
|
||||
<span v-show="entityData.isRelated">
|
||||
<template v-if="entityData.entityType" v-high-light="keywordList">
|
||||
<span v-if="entityData.entityType==='subscriber_id'">{{ $_.get(entityData, 'phone_number', 'Unknown') || 'Unknown' }}</span>
|
||||
<span v-else>{{ entityData.entityValue || 'Unknown' }}</span>
|
||||
</template>
|
||||
<span v-show="entityData.isRelated" class="cn-entity__header-icon">
|
||||
<el-popover
|
||||
popper-class="my-popper-class"
|
||||
placement="right"
|
||||
@@ -89,6 +92,18 @@
|
||||
<span class="row-item-value">{{ entityData.category ? appRisk(entityData.category.appRisk) : '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="entityData.entityType === 'subscriber_id'">
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-account-info"></i>
|
||||
<span class="row-item-label">{{ $t('entity.subscriberId') }} : </span>
|
||||
<span class="row-item-value" v-high-light="keywordList">{{ $_.get(entityData, 'entityValue', '-') || '-' }}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-location"></i>
|
||||
<span class="row-item-label">{{ $t('overall.location') }} : </span>
|
||||
<span class="row-item-value">{{$_.get(entityData, 'subscriber_longitude', '-') || '-'}}, {{$_.get(entityData, 'subscriber_latitude', '-') || '-'}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 通用字段 -->
|
||||
<div class="basic-info__item">
|
||||
<div class="item__box">
|
||||
@@ -102,21 +117,7 @@
|
||||
<!-- 曲线-->
|
||||
<div class="item-box-loading">
|
||||
<loading :loading="loading" size="small"></loading>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailSend${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'domain'">
|
||||
</div>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailSend${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'app'">
|
||||
</div>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailSend${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'ip'">
|
||||
</div>
|
||||
<div class="row__charts" :id="`entityDetailSend${entityType}${listMode}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -130,27 +131,13 @@
|
||||
</span>
|
||||
<div class="item-box-loading">
|
||||
<loading :loading="loading" size="small"></loading>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'domain'">
|
||||
</div>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'app'">
|
||||
</div>
|
||||
<div
|
||||
class="row__charts"
|
||||
:id="`entityDetailReceived${entityType}${listMode}`"
|
||||
v-if="entityData.entityType === 'ip'">
|
||||
</div>
|
||||
<div class="row__charts" :id="`entityDetailReceived${entityType}${listMode}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--score分数-->
|
||||
<div class="basic-info__item" style="display: flex;align-items: center;">
|
||||
<div class="basic-info__item" style="display: flex;align-items: center;" v-if="entityData.entityType !== 'subscriber_id'">
|
||||
<i class="cn-icon cn-icon-Score"></i>
|
||||
<div class="row-item-label">
|
||||
<span class="row-item-label">{{ $t('network.score') }} : </span>
|
||||
@@ -181,9 +168,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-show-detail">
|
||||
<div @click="showDetail"><i class="cn-icon cn-icon-detail"></i>{{ $t('overall.detail') }} ></div>
|
||||
<div @click="showGraph"><i class="cn-icon cn-icon-graph"></i>{{ $t('entities.graph') }} ></div>
|
||||
<div class="show-detail__block">
|
||||
<div class="new-show-detail">
|
||||
<div @click="showDetail"><i class="cn-icon cn-icon-detail"></i>{{ $t('overall.detail') }} ></div>
|
||||
<div @click="showGraph" v-if="entity.entityType !== 'subscriber_id'"><i class="cn-icon cn-icon-graph"></i>{{ $t('entities.graph') }} ></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div class="cn-entity__detail-overview" v-if="!isCollapse">
|
||||
@@ -277,6 +266,10 @@ export default {
|
||||
url = api.entity.entityList.appBasicInfo
|
||||
break
|
||||
}
|
||||
case ('subscriber_id'): {
|
||||
url = api.entity.entityList.subscriberBasicInfo
|
||||
break
|
||||
}
|
||||
}
|
||||
axios.get(`${url}?resource=${this.entity.entityValue}`).then(response => {
|
||||
this.$nextTick(() => {
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
|
||||
<div class="row__contents">
|
||||
<div class="row__content">
|
||||
<div class="row__content row__content-sent">
|
||||
<div class="row__charts-msg">{{$t('overall.sent')}}：
|
||||
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,9 @@
|
||||
<template v-else-if="entity.entityType === 'app'">
|
||||
<app-overview :entity="entity" :time-filter="timeFilter" :keywordList="keywordList" @reloadEntity="getEntity" @eventNum="getEventNum"></app-overview>
|
||||
</template>
|
||||
<template v-else-if="entity.entityType === 'subscriber_id'">
|
||||
<subscriber-overview :entity="entity" :time-filter="timeFilter" :keywordList="keywordList" @reloadEntity="getEntity" @eventNum="getEventNum"></subscriber-overview>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +19,7 @@
|
||||
import App from './App'
|
||||
import Domain from './Domain'
|
||||
import Ip from './Ip'
|
||||
import Subscriber from './Subscriber'
|
||||
|
||||
export default {
|
||||
/* 详情概览 */
|
||||
@@ -28,7 +32,8 @@ export default {
|
||||
components: {
|
||||
'domain-overview': Domain,
|
||||
'app-overview': App,
|
||||
'ip-overview': Ip
|
||||
'ip-overview': Ip,
|
||||
'subscriber-overview': Subscriber
|
||||
},
|
||||
methods: {
|
||||
getEntity (data) {
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
|
||||
<div class="row__contents">
|
||||
<div class="row__content">
|
||||
<div class="row__content row__content-sent">
|
||||
<div class="row__charts-msg">{{$t('overall.sent')}}：
|
||||
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
|
||||
<div class="row__contents">
|
||||
<div class="row__content">
|
||||
<div class="row__content row__content-sent">
|
||||
<div class="row__charts-msg">{{$t('overall.sent')}}:
|
||||
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.basicInfo')}}</div>
|
||||
<div class="overview__content">
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{ $t('entity.subscriberId') }}</div>
|
||||
<div class="row__content">{{$_.get(entity, 'entityValue', '-') || '-'}}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.location')}}</div>
|
||||
<div class="row__content" v-high-light="keywordList">{{$_.get(entity, 'subscriber_longitude', '-') || '-'}}, {{$_.get(entity, 'subscriber_latitude', '-') || '-'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.traffic')}}</div>
|
||||
<div class="overview__content overview__content-loading">
|
||||
<loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
|
||||
<div class="row__content">
|
||||
{{valueToRangeValue(entityData.max, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.max, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.average')}}</div>
|
||||
<div class="row__content">
|
||||
{{valueToRangeValue(entityData.avg, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.avg, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
|
||||
<div class="row__contents row__contents-subscriber">
|
||||
<div class="row__content row__content-sent">
|
||||
<div class="row__charts-msg">{{$t('overall.sent')}}：
|
||||
{{valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
<!-- 曲线-->
|
||||
<div class="row__content-loading">
|
||||
<div class="row__charts" :id="`entityDetailSend${entity.entityValue}`" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__content row__content-accept">
|
||||
<div class="row__charts-msg">{{$t('overall.received')}}：
|
||||
{{valueToRangeValue(entityData.bytesReceivedRate, unitTypes.bps).join(' ') !== '- ' ? valueToRangeValue(entityData.bytesReceivedRate, unitTypes.bps).join(' ') : '-'}}
|
||||
</div>
|
||||
<!-- 曲线-->
|
||||
<div class="row__content-loading">
|
||||
<div class="row__charts" :id="`entityDetailReceived${entity.entityValue}`" ></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.relationship')}}</div>
|
||||
<div class="overview__content domain__content">
|
||||
<div class="overview__tags domain__tags" ref="relationship"></div>
|
||||
<div class="overview__row overview__row-related">
|
||||
<div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
|
||||
<div class="row__content">
|
||||
<div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
|
||||
<loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
|
||||
</div>
|
||||
|
||||
<div class="data-item high-light-block" v-high-light="keywordList" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
|
||||
{{item.value}}
|
||||
</div>
|
||||
<div v-if="relationshipDataOne.length===0 && !loadingRelationshipOne">-</div>
|
||||
|
||||
<div v-if="relationshipShowOne">
|
||||
<div class="data-item show-more-related" id="related-app-more" @click.stop="showMoreApp" style="position: relative">...</div>
|
||||
<div v-if="isShowMoreApp" class="app-popover_block" id="showRelatedApp">
|
||||
<div class="popover-content" v-for="(item, index) in relationshipDataOne" :key="index">
|
||||
<span v-if="!item.show" class="high-light-block" v-high-light="keywordList">{{item.value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overview-map overview-map--app">
|
||||
<!-- <chart-->
|
||||
<!-- :chart-info="chart"-->
|
||||
<!-- :chart-data="chartData"-->
|
||||
<!-- :entity="entityCopy"-->
|
||||
<!-- :query-params="queryParams"-->
|
||||
<!-- :hide-header="true"-->
|
||||
<!-- :loading="loadingMap"-->
|
||||
<!-- @getCurrentTimeRange="getCurrentTimeRange"-->
|
||||
<!-- ></chart>-->
|
||||
<subscriber-map :entity="entity"></subscriber-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import entityDetailMixin from './entityDetailMixin'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import { valueToRangeValue } from '@/utils/unit-convert'
|
||||
import _ from 'lodash'
|
||||
import axios from 'axios'
|
||||
import relatedServer from '@/mixins/relatedServer'
|
||||
import { dateFormatByAppearance, getMillisecond, getSecond, getNowTime } from '@/utils/date-util'
|
||||
import Loading from '@/components/common/Loading'
|
||||
import { ref } from 'vue'
|
||||
import SubscriberMap from '@/views/entityExplorer/entityList/detailOverview/SubscriberMap'
|
||||
|
||||
export default {
|
||||
name: 'Subscriber',
|
||||
mixins: [entityDetailMixin, relatedServer],
|
||||
components: {
|
||||
Loading,
|
||||
SubscriberMap
|
||||
},
|
||||
props: {
|
||||
keywordList: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// entityData: {}
|
||||
entityType: 'subscriber',
|
||||
// trafficUrl: api.entityAppDetailTraffic,
|
||||
trafficUrl: api.entity.entityList.subscriberThroughput,
|
||||
// relationUrl: api.entityAppDetailRelation,
|
||||
// networkQuantityUrl: api.entityAppDetailNetworkQuantity,
|
||||
networkQuantityUrl: api.entity.entityList.subscriberPerformance,
|
||||
// linkInUrl: api.entityAppDetailLinkIn,
|
||||
// linkOutUrl: api.entityAppDetailLinkOut,
|
||||
// performanceUrl: api.entityAppDetailPerformance,
|
||||
// securityUrl: api.entityAppDetailSecurity,
|
||||
// trafficUrlMap: api.entityAppDetailTrafficMap,
|
||||
// trafficUrlMap: api.entity.entityList.appTrafficMap,
|
||||
// relatedServerDomainUrl: api.entity.entityList.appRelatedDomain,
|
||||
relatedServerAppUrl: api.entity.entityList.subscriberRelatedApp,
|
||||
chartData: null,
|
||||
listMode: 'list',
|
||||
singleValues: {
|
||||
chartInfos: [
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-time',
|
||||
unitType: unitTypes.time,
|
||||
iconColor: '#2ca3fe',
|
||||
iconBackgroundColor: '#eff6fe'
|
||||
},
|
||||
type: 507,
|
||||
i18n: 'entities.avgRoundTripTime'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-http',
|
||||
unitType: unitTypes.time,
|
||||
iconColor: '#2ca3fe',
|
||||
iconBackgroundColor: '#eff6fe'
|
||||
},
|
||||
type: 507,
|
||||
i18n: 'entities.httpResponseLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-ssl',
|
||||
unitType: unitTypes.time,
|
||||
iconColor: '#2ca3fe',
|
||||
iconBackgroundColor: '#eff6fe'
|
||||
},
|
||||
type: 507,
|
||||
i18n: 'entities.sslConLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-package-loss',
|
||||
unitType: unitTypes.percent,
|
||||
iconColor: '#2ca3fe',
|
||||
iconBackgroundColor: '#eff6fe'
|
||||
},
|
||||
type: 507,
|
||||
i18n: 'entities.sequenceGapLossPercent'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-upload',
|
||||
unitType: unitTypes.percent,
|
||||
iconColor: '#2ca3fe',
|
||||
iconBackgroundColor: '#eff6fe'
|
||||
},
|
||||
type: 507,
|
||||
i18n: 'entities.pktRetransPercent'
|
||||
}
|
||||
],
|
||||
chartDatas: [null, null, null, null, null]
|
||||
},
|
||||
loadingTraffic: false,
|
||||
loadingRelationshipOne: false,
|
||||
loadingRelationshipTwo: false,
|
||||
loadingNetworkQuality: false,
|
||||
loadingOut: false,
|
||||
loadingIn: false,
|
||||
loadingAlert: false,
|
||||
loadingSecurityEvents: false,
|
||||
loadingMap: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMillisecond,
|
||||
dateFormatByAppearance,
|
||||
getQueryParams (dateRangeValue) {
|
||||
if (dateRangeValue && (!this.timeFilter.startTime || !this.timeFilter.endTime)) {
|
||||
// range取 config.js 中配置的值
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
return {
|
||||
startTime: getSecond(startTime),
|
||||
endTime: getSecond(endTime),
|
||||
resource: this.entity.entityValue
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
resource: this.entity.entityValue
|
||||
}
|
||||
}
|
||||
},
|
||||
getPerformanceQueryParams () {
|
||||
return {
|
||||
appName: this.entity.entityValue
|
||||
}
|
||||
},
|
||||
handleRelationData (result) {
|
||||
this.entityData.domainCount = result.domainCount
|
||||
this.entityData.ipCount = result.ipCount
|
||||
},
|
||||
queryRelated () {
|
||||
this.getRelatedServerDataOne(this.relatedServerAppUrl)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.queryParams = this.getQueryParams()
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.queryRelated()
|
||||
}, 250)
|
||||
})
|
||||
},
|
||||
setup (props) {
|
||||
const entityData = ref({ ...props.entity })
|
||||
return {
|
||||
unitTypes,
|
||||
entityCopy: {
|
||||
..._.cloneDeep(props.entity)
|
||||
},
|
||||
valueToRangeValue,
|
||||
entityData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<div class="subscriber-map">
|
||||
<div class="subscriber-map-body" style="height: 100%">
|
||||
<loading :loading="trackingMapLoading" @click="developmentClick"></loading>
|
||||
<div id="subscriberMap" class="entity-subscriber-map"></div>
|
||||
</div>
|
||||
|
||||
<div class="geo-analysis__hexagon-tooltip" id="tooltip" :class="`geo-analysis__hexagon-tooltip--${tooltip.type}`" v-if="tooltip.showMarkerTooltip || tooltip.showPolygonTooltip" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" @mouseenter="tooltipMouseEnter" @mouseleave="tooltipMouseLeave">
|
||||
<div class="hexagon-tooltip__header" :style="`background-color: ${tooltipHeaderColor}`">
|
||||
<div class="header__icon">
|
||||
<svg v-if="tooltip.type === tooltipType.hexagon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M747.52 921.088H277.504L42.496 514.048l235.008-407.04H747.52l235.008 407.04-235.008 407.04z m-425.472-76.8h381.44l190.464-330.24-190.464-330.24h-381.44l-190.464 330.24 190.464 330.24z"></path></svg>
|
||||
<template v-else-if="tooltip.type === tooltipType.human">
|
||||
<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"></path></svg>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.baseStation">
|
||||
<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="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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="header__title">
|
||||
<template v-if="tooltip.type === tooltipType.hexagon">HEX</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.human">MSISDN</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.baseStation">CID</template>
|
||||
</div>
|
||||
<div class="header__content">
|
||||
<template v-if="tooltip.type === tooltipType.hexagon">{{currentPolygon.hexId}}</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.human">{{currentSubscriber.subscriberDto.phoneNumber}}</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.baseStation">0xxa8805</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hexagon-tooltip__body">
|
||||
<template v-if="tooltip.type === tooltipType.hexagon">
|
||||
<template v-for="(item, i) in JSON.parse(currentPolygon.locations)" :key="item.hexId">
|
||||
<div class="body__timeline" v-if="i < 5">
|
||||
<div class="timeline-symbol"></div>
|
||||
<div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{ $t('location.location') }}</div>
|
||||
<div class="item__value">{{item.longitude}}, {{item.latitude}}</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">Time</div>
|
||||
<div class="item__value">{{dateFormatByAppearance(Number(item.time))}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="body__timeline" v-if="JSON.parse(currentPolygon.locations).length > 5">...</div>
|
||||
</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.human">
|
||||
<div class="body__item">
|
||||
<div class="item__label">ID</div>
|
||||
<div class="item__value">{{currentSubscriber.subscriberId}}</div>
|
||||
</div>
|
||||
<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 class="body__item">
|
||||
<div class="item__label">{{$t('overall.location')}}</div>
|
||||
<div class="item__value">China, Shanghai</div>
|
||||
</div>
|
||||
<div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('location.traceTracking')}}</div>
|
||||
</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.baseStation">
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{ $t('location.locationAreaCode') }}</div>
|
||||
<div class="item__value">12</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{ $t('location.mobileNetworkCode') }}</div>
|
||||
<div class="item__value">1</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{ $t('location.communicationType') }}</div>
|
||||
<div class="item__value">4G</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{$t('overall.location')}}</div>
|
||||
<div class="item__value">China, Shanghai</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { getNowTime, getSecond, dateFormatByAppearance } from '@/utils/date-util'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
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'
|
||||
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>'
|
||||
|
||||
export default {
|
||||
name: 'EntityDetailMap',
|
||||
mixins: [chartMixin],
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tooltipType: {
|
||||
hexagon: 'hexagon',
|
||||
baseStation: 'base-station',
|
||||
human: 'human'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initMap()
|
||||
},
|
||||
unmounted () {
|
||||
this.mapChart && this.mapChart?.remove?.()
|
||||
this.mapChart = null
|
||||
},
|
||||
computed: {
|
||||
tooltipHeaderColor () {
|
||||
if (this.tooltip.type === this.tooltipType.hexagon) {
|
||||
const color = this.currentPolygon.color.split(',')
|
||||
color[0] = color[0].split('[')[1]
|
||||
color[2] = color[2].split(']')[0]
|
||||
return `rgba(${color.join(',')},.8)`
|
||||
} else if (this.tooltip.type === this.tooltipType.human) {
|
||||
return '#38ACD2'
|
||||
} else if (this.tooltip.type === this.tooltipType.baseStation) {
|
||||
return '#233447'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 切换追踪的用户
|
||||
currentShowSubscriber (n) {
|
||||
this.mapChart.getLayer('trackingHexagon') && this.mapChart.removeLayer('trackingHexagon')
|
||||
this.mapChart.getLayer('trackingLine') && this.mapChart.removeLayer('trackingLine')
|
||||
this.mapChart.getSource('trackingHexGrid') && this.mapChart.removeSource('trackingHexGrid')
|
||||
this.mapChart.getSource('trackingLineSource') && this.mapChart.removeSource('trackingLineSource')
|
||||
this.trackingHumanMarker.remove && this.trackingHumanMarker.remove()
|
||||
this.trackingHumanMarker = {}
|
||||
if (n) {
|
||||
this.renderTrackingHexagon()
|
||||
}
|
||||
},
|
||||
timeFilter (n) {
|
||||
this.unbindTrackingHexagonEvents()
|
||||
this.mapChart.getLayer('trackingHexagon') && this.mapChart.removeLayer('trackingHexagon')
|
||||
this.mapChart.getLayer('trackingLine') && this.mapChart.removeLayer('trackingLine')
|
||||
this.mapChart.getSource('trackingHexGrid') && this.mapChart.removeSource('trackingHexGrid')
|
||||
this.mapChart.getSource('trackingLineSource') && this.mapChart.removeSource('trackingLineSource')
|
||||
this.trackingHumanMarker.remove && this.trackingHumanMarker.remove()
|
||||
this.trackingHumanMarker = {}
|
||||
this.changeTimeFilterToInitList()
|
||||
this.initTraceTrackingTab()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dateFormatByAppearance,
|
||||
async initMap () {
|
||||
const _this = this
|
||||
this.toggleLoading(false)
|
||||
this.mapChart = new maplibregl.Map({
|
||||
container: 'subscriberMap',
|
||||
style: mapStyle,
|
||||
center: this.center,
|
||||
maxZoom: this.maxZoom,
|
||||
minZoom: this.minZoom,
|
||||
zoom: this.defaultZoom
|
||||
})
|
||||
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
|
||||
fetch(`${params.url.split('://')[1]}`)
|
||||
.then(t => {
|
||||
if (t.status == 200) {
|
||||
t.arrayBuffer().then(arr => {
|
||||
callback(null, arr, null, null)
|
||||
})
|
||||
} else {
|
||||
callback(new Error(`Tile fetch error: ${t.statusText}`))
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
callback(new Error(e))
|
||||
})
|
||||
return { cancel: () => { } }
|
||||
})
|
||||
this.mapChart.on('load', async () => {
|
||||
const baseStationData = await _this.queryBaseStation()
|
||||
_this.renderMarker(baseStationData, _this.tooltipType.baseStation)
|
||||
|
||||
_this.initTraceTrackingTab()
|
||||
})
|
||||
},
|
||||
async initTraceTrackingTab () {
|
||||
await this.queryTraceTracking()
|
||||
if (!this.currentShowSubscriber && this.trackingSubscriber) {
|
||||
this.currentShowSubscriber = this.trackingSubscriber
|
||||
}
|
||||
this.renderTrackingHexagon()
|
||||
},
|
||||
async queryBaseStation () {
|
||||
// this.loading.baseStationLoading = true
|
||||
try {
|
||||
// const response = await axios.get(api.location.baseStation)
|
||||
const response = [
|
||||
{
|
||||
longitude: 116.38,
|
||||
latitude: 39.9
|
||||
},
|
||||
{
|
||||
longitude: 116.39,
|
||||
latitude: 39.9
|
||||
},
|
||||
{
|
||||
longitude: 116.383,
|
||||
latitude: 39.886
|
||||
},
|
||||
{
|
||||
longitude: 116.378,
|
||||
latitude: 39.902
|
||||
},
|
||||
{
|
||||
longitude: 116.369,
|
||||
latitude: 39.91
|
||||
},
|
||||
{
|
||||
longitude: 116.38,
|
||||
latitude: 39.91
|
||||
}
|
||||
]
|
||||
return response // response.data.data.list
|
||||
} catch (e) {
|
||||
this.errorMsgHandler(e)
|
||||
console.error(e)
|
||||
} finally {
|
||||
// this.loading.baseStationLoading = false
|
||||
}
|
||||
return []
|
||||
},
|
||||
reload (startTime, endTime, dateRangeValue) {
|
||||
this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
|
||||
const { query } = this.$route
|
||||
this.$store.commit('setTimeRangeArray', [this.timeFilter.startTime, this.timeFilter.endTime])
|
||||
this.$store.commit('setTimeRangeFlag', dateRangeValue.value)
|
||||
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
startTime: this.timeFilter.startTime,
|
||||
endTime: this.timeFilter.endTime,
|
||||
range: dateRangeValue.value
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
async queryTraceTracking () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
dateRangeValue: this.timeFilter.dateRangeValue,
|
||||
subscriberIds: `'${this.entity.entityValue}'`,
|
||||
level: this.mapLevel
|
||||
}
|
||||
this.trackingSubscriber.subscriberId = this.entity.entityValue
|
||||
this.trackingMapLoading = true
|
||||
try {
|
||||
const response = await axios.get(api.location.tracking, { params })
|
||||
this.trackingMapLoading = false
|
||||
if (response.data.data.result) {
|
||||
this.trackingNoData = false
|
||||
this.showTrackingError = false
|
||||
const find = response.data.data.result.find(item => item.subscriberId === this.trackingSubscriber.subscriberId)
|
||||
if (find) {
|
||||
this.trackingSubscriber.trackRecords = find.trackRecords
|
||||
} else {
|
||||
this.trackingSubscriber.trackRecords = []
|
||||
}
|
||||
this.trackingSubscriber.show = false
|
||||
} else {
|
||||
this.trackingSubscriber.trackRecords = []
|
||||
}
|
||||
|
||||
// 计算停留时间
|
||||
if (this.trackingSubscriber.trackRecords.length > 0) {
|
||||
const trackRecords = this.trackingSubscriber.trackRecords
|
||||
// 初始化时间线可视范围角标
|
||||
if (trackRecords.length < 11) {
|
||||
this.trackingSubscriber.scrollStartIndex = 0
|
||||
this.trackingSubscriber.scrollEndIndex = trackRecords.length
|
||||
} else {
|
||||
this.trackingSubscriber.scrollStartIndex = 0
|
||||
this.trackingSubscriber.scrollEndIndex = 11
|
||||
}
|
||||
|
||||
if (trackRecords && trackRecords.length > 0) {
|
||||
for (let i = 0; i < trackRecords.length; i++) {
|
||||
if (i > 0) {
|
||||
if ((trackRecords[i - 1].subscriberLongitude === trackRecords[i].subscriberLongitude) && (trackRecords[i - 1].subscriberLatitude === trackRecords[i].subscriberLatitude)) {
|
||||
// 如果连续两条地址重复，则将时间累加，并将上一条删除，键值-1继续循环
|
||||
if (i > 1 && trackRecords[i - 2]) {
|
||||
const stayTime = unitConvert(trackRecords[i - 2].time - trackRecords[i].time, unitTypes.time, 's')
|
||||
if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
|
||||
stayTime[0] = Number(stayTime[0]).toFixed(0)
|
||||
}
|
||||
trackRecords[i].stayTime = stayTime.join(' ')
|
||||
} else {
|
||||
// 数据只有2条，或者第1条和第2条地点重复，删除1，合并时间
|
||||
const stayTime = unitConvert(trackRecords[i - 1].time - trackRecords[i].time, unitTypes.time, 's')
|
||||
if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
|
||||
stayTime[0] = Number(stayTime[0]).toFixed(0)
|
||||
}
|
||||
trackRecords[i].stayTime = stayTime.join(' ')
|
||||
}
|
||||
trackRecords.splice(i - 1, 1)
|
||||
i = i - 1
|
||||
} else {
|
||||
const stayTime = unitConvert(trackRecords[i - 1].time - trackRecords[i].time, unitTypes.time, 's')
|
||||
if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) {
|
||||
stayTime[0] = Number(stayTime[0]).toFixed(0)
|
||||
}
|
||||
trackRecords[i].stayTime = stayTime.join(' ')
|
||||
}
|
||||
if (i === trackRecords.length - 1) {
|
||||
// 初始化数据时，重置偏移量和列表高度
|
||||
this.trackingSubscriber.startOffset = 0
|
||||
this.trackingSubscriber.listHeight = i * this.scrollInfo.itemSize
|
||||
}
|
||||
} else {
|
||||
trackRecords[i].stayTime = '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.trackingSubscriber.trackRecords = trackRecords
|
||||
} else {
|
||||
this.trackingNoData = true
|
||||
}
|
||||
} catch (e) {
|
||||
this.showTrackingError = true
|
||||
this.trackingNoData = false
|
||||
this.trackingErrorMsg = this.errorMsgHandler(e)
|
||||
console.error(e)
|
||||
} finally {
|
||||
this.trackingMapLoading = false
|
||||
}
|
||||
},
|
||||
onScroll (e) {
|
||||
// 当前滚动位置
|
||||
const scrollTop = e.target.scrollTop
|
||||
// 列表开始索引
|
||||
const startIndex = Math.floor(scrollTop / this.scrollInfo.itemSize) || 0
|
||||
// 列表结束索引
|
||||
const endIndex = Math.ceil((scrollTop + this.scrollInfo.containerHeight) / this.scrollInfo.itemSize)
|
||||
this.trackingSubscriber.scrollStartIndex = startIndex
|
||||
this.trackingSubscriber.scrollEndIndex = endIndex
|
||||
// 列表距离顶部距离
|
||||
this.trackingSubscriber.startOffset = scrollTop - (scrollTop % this.scrollInfo.itemSize)
|
||||
},
|
||||
tooltipMouseEnter () {
|
||||
this.tooltip.mouseInMarkerOrTooltip = true
|
||||
},
|
||||
tooltipMouseLeave (event) {
|
||||
if (this.currentMarkerDom && !this.currentMarkerDom.contains(event.relatedTarget)) {
|
||||
this.tooltip.mouseInMarkerOrTooltip = false
|
||||
this.tooltip.showMarkerTooltip = false
|
||||
this.currentMarkerDom.classList.remove('map-marker--hover')
|
||||
}
|
||||
},
|
||||
trackingHexagonMouseEnter () {
|
||||
this.tooltip.mouseIsInPolygon = true
|
||||
},
|
||||
trackingHexagonMouseLeave () {
|
||||
this.tooltip.showPolygonTooltip = false
|
||||
this.tooltip.mouseIsInPolygon = false
|
||||
// 去掉上一块的高亮
|
||||
this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, false)
|
||||
},
|
||||
trackingHexagonMouseMove (e) {
|
||||
const { originalEvent, features } = e
|
||||
if (!this.tooltip.mouseInMarkerOrTooltip) {
|
||||
this.tooltip.showPolygonTooltip = true
|
||||
this.tooltip.type = this.tooltipType.hexagon
|
||||
if (this.tooltip.type === this.tooltipType.hexagon && this.currentPolygon.id && this.currentPolygon.id !== features[0].id) {
|
||||
// 去掉上一块的高亮
|
||||
this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, false)
|
||||
}
|
||||
this.currentPolygon = features[0].properties
|
||||
this.currentPolygon.id = features[0].id
|
||||
this.currentPolygon.location = `${h3ToGeo(this.currentPolygon.hexId)[1]}, ${h3ToGeo(this.currentPolygon.hexId)[0]}`
|
||||
this.tooltip.x = originalEvent.clientX + 15
|
||||
this.tooltip.y = originalEvent.clientY + 5
|
||||
|
||||
// 鼠标滑过高亮
|
||||
this.hoverTrigger('trackingHexGrid', this.currentPolygon.id, true)
|
||||
}
|
||||
},
|
||||
bindMarkerEvent (el, markerData, type) {
|
||||
el.addEventListener('mouseenter', e => {
|
||||
this.currentMarkerDom = el
|
||||
if (type === this.tooltipType.human) {
|
||||
this.currentSubscriber = markerData
|
||||
if (!this.tooltip.mouseInMarkerOrTooltip) {
|
||||
this.tooltip.x = e.clientX + 15 - e.offsetX
|
||||
this.tooltip.y = (e.clientY + 15 - e.offsetY + this.tooltipDomHeight.human) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.human) : (e.clientY + 15 - e.offsetY)
|
||||
}
|
||||
} else if (type === this.tooltipType.baseStation) {
|
||||
this.currentBaseStation = markerData
|
||||
if (!this.tooltip.mouseInMarkerOrTooltip) {
|
||||
this.tooltip.x = e.clientX + 15 - e.offsetX
|
||||
this.tooltip.y = (e.clientY + 15 - e.offsetY + this.tooltipDomHeight.baseStation) > this.mapDomHeight ? (this.mapDomHeight - this.tooltipDomHeight.baseStation) : (e.clientY + 15 - e.offsetY)
|
||||
}
|
||||
}
|
||||
|
||||
this.tooltip.mouseInMarkerOrTooltip = true
|
||||
this.tooltip.type = type
|
||||
this.tooltip.showMarkerTooltip = true
|
||||
el.classList.add('map-marker--hover')
|
||||
})
|
||||
el.addEventListener('mouseleave', event => {
|
||||
const tooltipDom = document.getElementById('tooltip')
|
||||
if (!tooltipDom.contains(event.relatedTarget)) {
|
||||
el.classList.remove('map-marker--hover')
|
||||
this.tooltip.mouseInMarkerOrTooltip = false
|
||||
this.tooltip.showMarkerTooltip = false
|
||||
}
|
||||
})
|
||||
if (type === this.tooltipType.human) {
|
||||
el.addEventListener('click', e => {
|
||||
this.humanMarkers.forEach(m => {
|
||||
m.getElement().classList.remove('map-marker--highlight')
|
||||
})
|
||||
if (this.highlightSubscriber.subscriberId !== markerData.subscriberId) {
|
||||
el.classList.add('map-marker--highlight')
|
||||
this.highlightSubscriber = markerData
|
||||
// 将滚动条跳转到对应位置
|
||||
document.querySelector(`#locationMap-subscriberId-${markerData.subscriberId}`).scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
} else {
|
||||
this.highlightSubscriber = {}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 地图上人图标鼠标悬浮框中点击追踪事件
|
||||
trackSubscriber (subscriber) {
|
||||
const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId)
|
||||
if (!find) {
|
||||
this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false, scrollStartIndex: 0, scrollEndIndex: 11, startOffset: 0, listHeight: 0 })
|
||||
}
|
||||
this.currentShowSubscriber = subscriber
|
||||
this.tooltip.showMarkerTooltip = false
|
||||
},
|
||||
unbindTrackingHexagonEvents () {
|
||||
this.mapChart.off('mouseenter', this.trackingHexagonMouseEnter)
|
||||
this.mapChart.off('mouseleave', this.trackingHexagonMouseLeave)
|
||||
this.mapChart.off('mousemove', this.trackingHexagonMouseMove)
|
||||
},
|
||||
renderTrackingMarker (coordinates) {
|
||||
const el = document.createElement('div')
|
||||
el.className = 'map-tracking-marker'
|
||||
el.innerHTML = `<div class="tracking-marker__inner-circle">${humanSvg}</div>`
|
||||
this.trackingHumanMarker = new maplibregl.Marker({ element: el }).setLngLat(coordinates).addTo(this.mapChart)
|
||||
},
|
||||
renderTrackingHexagon () {
|
||||
if (!this.currentShowSubscriber) {
|
||||
return true
|
||||
}
|
||||
const currentShowSubscriberRecords = this.currentShowSubscriber.trackRecords
|
||||
if (currentShowSubscriberRecords && currentShowSubscriberRecords.length > 0) {
|
||||
// 六边形
|
||||
this.trackingPolygonSourceData = this.hexagonDataConverter(this.currentShowSubscriber.trackRecords)
|
||||
this.mapChart.addSource('trackingHexGrid', {
|
||||
type: 'geojson',
|
||||
data: this.trackingPolygonSourceData
|
||||
})
|
||||
this.mapChart.addLayer({
|
||||
id: 'trackingHexagon',
|
||||
type: 'fill',
|
||||
source: 'trackingHexGrid',
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-color': ['get', 'color'],
|
||||
'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.75, 0.5]
|
||||
}
|
||||
})
|
||||
// 轨迹线
|
||||
const mapLineSourceData = this.mapLineDataConverter()
|
||||
this.mapChart.addSource('trackingLineSource', {
|
||||
type: 'geojson',
|
||||
data: mapLineSourceData
|
||||
})
|
||||
this.mapChart.addLayer({
|
||||
id: 'trackingLine',
|
||||
type: 'line',
|
||||
source: 'trackingLineSource',
|
||||
paint: {
|
||||
'line-color': 'rgba(222, 52, 52, .8)',
|
||||
'line-width': 3
|
||||
}
|
||||
})
|
||||
// 最后所在地的图标
|
||||
const coordinate = h3ToGeo(currentShowSubscriberRecords[0].hexId)
|
||||
this.renderTrackingMarker([coordinate[1], coordinate[0]])
|
||||
this.bindTrackingHexagonEvents()
|
||||
}
|
||||
},
|
||||
mapLineDataConverter () {
|
||||
const records = this.currentShowSubscriber.trackRecords
|
||||
const feature = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: records.map(d => {
|
||||
const cs = h3ToGeo(d.hexId)
|
||||
return [cs[1], cs[0]]
|
||||
})
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features: [feature]
|
||||
}
|
||||
},
|
||||
renderMarker (data, type) {
|
||||
let svg
|
||||
if (type === this.tooltipType.baseStation) {
|
||||
svg = baseStationSvg
|
||||
} else if (type === this.tooltipType.human) {
|
||||
svg = humanSvg
|
||||
}
|
||||
try {
|
||||
data.forEach(marker => {
|
||||
if (type === this.tooltipType.human && marker.subscriberDto) {
|
||||
const el = document.createElement('div')
|
||||
el.className = `map-marker map-marker--${type}`
|
||||
if (marker.subscriberId === this.highlightSubscriber.subscriberId) {
|
||||
el.classList.add('map-marker--highlight')
|
||||
}
|
||||
el.innerHTML = svg
|
||||
// 鼠标事件，控制tooltip显示和marker尺寸
|
||||
this.bindMarkerEvent(el, marker, type)
|
||||
const mapMarker = new maplibregl.Marker({ element: el }).setLngLat([marker.subscriberDto.subscriberLongitude, marker.subscriberDto.subscriberLatitude]).addTo(this.mapChart)
|
||||
mapMarker.subscriberId = marker.subscriberId
|
||||
this.humanMarkers.push(mapMarker)
|
||||
} else if (type === this.tooltipType.baseStation) {
|
||||
const el = document.createElement('div')
|
||||
el.className = `map-marker map-marker--${type}`
|
||||
el.innerHTML = svg
|
||||
// 鼠标事件，控制tooltip显示和marker尺寸
|
||||
this.bindMarkerEvent(el, marker, type)
|
||||
const mapMarker = new maplibregl.Marker({ element: el }).setLngLat([marker.longitude, marker.latitude]).addTo(this.mapChart)
|
||||
this.baseStationMarkers.push(mapMarker)
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
hexagonDataConverter (data) {
|
||||
const featureCollection = { type: 'FeatureCollection' }
|
||||
// 对hexId去重，将重复的hexId的时间合并
|
||||
const hexagons = []
|
||||
data.forEach(d => {
|
||||
const find = hexagons.find(h => h.hexId === d.hexId)
|
||||
if (!find) {
|
||||
hexagons.push({ hexId: d.hexId, locations: [{ time: d.time, longitude: d.subscriberLongitude, latitude: d.subscriberLatitude }] })
|
||||
} else {
|
||||
if (find.locations.length < 6) {
|
||||
find.locations.push({ time: d.time, longitude: d.subscriberLongitude, latitude: d.subscriberLatitude })
|
||||
}
|
||||
}
|
||||
})
|
||||
featureCollection.features = hexagons.map((d, i) => ({
|
||||
id: i + 100000,
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
h3ToGeoBoundary(d.hexId, true)
|
||||
]
|
||||
},
|
||||
properties: {
|
||||
hexId: d.hexId,
|
||||
number: d.number,
|
||||
locations: d.locations,
|
||||
color: [37, 55, 128]
|
||||
}
|
||||
}))
|
||||
return featureCollection
|
||||
},
|
||||
bindTrackingHexagonEvents () {
|
||||
this.mapChart.on('mouseenter', 'trackingHexagon', this.trackingHexagonMouseEnter)
|
||||
this.mapChart.on('mouseleave', 'trackingHexagon', this.trackingHexagonMouseLeave)
|
||||
this.mapChart.on('mousemove', 'trackingHexagon', this.trackingHexagonMouseMove)
|
||||
},
|
||||
hoverTrigger (source, id, hover) {
|
||||
this.mapChart.setFeatureState({ source, id }, { hover })
|
||||
},
|
||||
timelineMouseEnter (subscriber, record) {
|
||||
this.trackingPolygonSourceData.features.forEach(f => {
|
||||
this.hoverTrigger('trackingHexGrid', f.id, false)
|
||||
})
|
||||
if (this.currentShowSubscriber.subscriberId === subscriber.subscriberId) {
|
||||
const find = this.trackingPolygonSourceData.features.find(d => d.properties.hexId === record.hexId)
|
||||
if (find) {
|
||||
this.hoverTrigger('trackingHexGrid', find.id, true)
|
||||
}
|
||||
}
|
||||
},
|
||||
timelineMouseLeave (subscriber, record) {
|
||||
if (this.currentShowSubscriber.subscriberId === subscriber.subscriberId) {
|
||||
const find = this.trackingPolygonSourceData.features.find(d => d.properties.hexId === record.hexId)
|
||||
if (find) {
|
||||
this.hoverTrigger('trackingHexGrid', find.id, false)
|
||||
}
|
||||
}
|
||||
},
|
||||
changeTimeFilterToInitList () {
|
||||
this.trackingSubscriber.scrollStartIndex = 0
|
||||
this.trackingSubscriber.scrollEndIndex = 11
|
||||
this.trackingSubscriber.startOffset = 0
|
||||
this.trackingSubscriber.listHeight = 0
|
||||
},
|
||||
developmentClick () {
|
||||
const dev = process.env.NODE_ENV
|
||||
if (dev) {
|
||||
this.trackingMapLoading = false
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
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
|
||||
|
||||
const currentPoint = ref({})
|
||||
const tooltip = ref({
|
||||
showTooltip: false,
|
||||
type: ''
|
||||
})
|
||||
const myChart = shallowRef({})
|
||||
const trackingSubscriber = ref({
|
||||
subscriberId: '',
|
||||
show: false,
|
||||
showLine: false,
|
||||
scrollStartIndex: 0,
|
||||
scrollEndIndex: 11,
|
||||
startOffset: 0,
|
||||
listHeight: 0,
|
||||
trackRecords: []
|
||||
})
|
||||
const trackingSubscriberList = ref([])
|
||||
const scrollInfo = ref({
|
||||
itemSize: 50,
|
||||
containerHeight: 660
|
||||
})
|
||||
const trackingNoData = ref(true)
|
||||
const showTrackingError = ref(false)
|
||||
const trackingErrorMsg = ref('')
|
||||
const tooltipDomHeight = {
|
||||
hexagon: 153,
|
||||
baseStation: 153,
|
||||
human: 167
|
||||
}
|
||||
const currentPolygon = ref({})
|
||||
const currentSubscriber = ref({})
|
||||
const trackingHumanMarker = shallowRef({})
|
||||
const mapChart = shallowRef(null)
|
||||
const baseStationMarkers = shallowRef([])
|
||||
|
||||
const mapConfig = localStorage.getItem(storageKey.mapConfig) ? JSON.parse(localStorage.getItem(storageKey.mapConfig)) : defaultMapConfig
|
||||
const trackingMapLoading = ref(true)
|
||||
return {
|
||||
timeFilter,
|
||||
currentPoint,
|
||||
tooltip,
|
||||
myChart,
|
||||
maxZoom: mapConfig.maxZoom, // 地图最小缩放比例
|
||||
minZoom: mapConfig.minZoom, // 地图最大缩放比例
|
||||
mapLevel: 1, // 地图精度 1、2、3
|
||||
defaultZoom: mapConfig.defaultZoom, // 地图默认缩放比例
|
||||
center: mapConfig.center, // 地图默认中心点。北京：[116.38, 39.9] 纽约：[-73.94539, 40.841843]
|
||||
trackingSubscriber,
|
||||
trackingSubscriberList,
|
||||
scrollInfo,
|
||||
trackingNoData,
|
||||
showTrackingError,
|
||||
trackingErrorMsg,
|
||||
tooltipDomHeight,
|
||||
currentPolygon,
|
||||
currentSubscriber,
|
||||
trackingHumanMarker,
|
||||
trackingPolygonSourceData: shallowRef({}),
|
||||
mapChart,
|
||||
baseStationMarkers,
|
||||
trackingMapLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -51,6 +51,10 @@ export default {
|
||||
className = 'cn-icon cn-icon-app2'
|
||||
break
|
||||
}
|
||||
case ('subscriber_id'): {
|
||||
className = 'cn-icon cn-icon-pedestrian'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return className
|
||||
@@ -264,6 +268,10 @@ export default {
|
||||
this.performanceEventUrl = api.entity.entityList.appEventPerformance
|
||||
break
|
||||
}
|
||||
case 'subscriber_id': {
|
||||
this.trafficUrl = api.entity.entityList.subscriberThroughput
|
||||
break
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
@@ -348,8 +356,10 @@ export default {
|
||||
this.initUrl()
|
||||
setTimeout(() => {
|
||||
this.queryEntityDetailTraffic()
|
||||
this.queryNetworkQuantity()
|
||||
this.queryEventNum()
|
||||
if (this.entity.entityType !== 'subscriber_id') {
|
||||
this.queryNetworkQuantity()
|
||||
this.queryEventNum()
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeUnmount () {
|
||||
|
||||
Reference in New Issue
Block a user