diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue index e817199c..ef75b952 100644 --- a/src/views/location/Index.vue +++ b/src/views/location/Index.vue @@ -14,7 +14,7 @@ clearable filterable remote - placeholder="Press Enter to Search" + :placeholder="$t('location.enterPhoneNumberToSearch')" popper-class="search-select" placement="bottom" @blur="searchBlur" @@ -144,15 +144,15 @@
-
Group
+
{{$t('entities.group')}}
Terrorist
-
Info
+
{{$t('overall.info')}}
Leader
-
Location
+
{{$t('overall.location')}}
China, Shanghai
@@ -169,7 +169,7 @@
- Location: {{subscriber.trackRecords[0].subscriberLongitude}},{{subscriber.trackRecords[0].subscriberLatitude}} + {{$t('overall.location')}}: {{subscriber.trackRecords[0].subscriberLongitude}},{{subscriber.trackRecords[0].subscriberLatitude}}
Time of Arrival: {{dateFormatByAppearance(Number(subscriber.trackRecords[0].time))}} @@ -188,7 +188,7 @@ >
- Location: {{record.subscriberLongitude}},{{record.subscriberLatitude}} + {{$t('overall.location')}}: {{record.subscriberLongitude}},{{record.subscriberLatitude}}
Time of arrival: {{dateFormatByAppearance(Number(record.time))}} @@ -236,6 +236,7 @@
+
@@ -260,18 +261,18 @@ @@ -435,6 +436,10 @@ export default { if (!this.currentShowSubscriber && this.trackingSubscribers.length > 0) { this.currentShowSubscriber = this.trackingSubscribers[0] } + const find = this.trackingSubscribers.find(s => s.subscriberId === this.currentShowSubscriber.subscriberId) + if (find) { + this.currentShowSubscriber.trackRecords = find.trackRecords + } this.renderTrackingHexagon() }, async renderDensityPie () { @@ -594,9 +599,28 @@ export default { } try { const response = await axios.get(api.location.tracking, { params }) - response.data.data.result.forEach(r => { - this.trackingSubscribers.find(item => item.subscriberId === r.subscriberId).trackRecords = r.trackRecords - }) + /*response.data.data.result.forEach(r => { + const find = this.trackingSubscribers.find(item => item.subscriberId === r.subscriberId) + if (find) { + find.trackRecords = r.trackRecords + } else { + find.trackRecords = [] + } + })*/ + if (response.data.data.result) { + this.trackingSubscribers.forEach(s => { + const find = response.data.data.result.find(item => item.subscriberId === s.subscriberId) + if (find) { + s.trackRecords = find.trackRecords + } else { + s.trackRecords = [] + } + }) + } else { + this.trackingSubscribers.forEach(s => { + s.trackRecords = [] + }) + } // 计算停留时间 this.trackingSubscribers.forEach(s => { if (s.trackRecords && s.trackRecords.length > 0) { @@ -668,21 +692,34 @@ export default { } else if (type === this.tooltipType.human) { svg = humanSvg } - data.forEach(marker => { - const el = document.createElement('div') - el.className = `map-marker map-marker--${type}` - el.innerHTML = svg - // 鼠标事件，控制tooltip显示和marker尺寸 - this.bindMarkerEvent(el) - const mapMarker = new maplibregl.Marker({ element: el }) - .setLngLat([marker.longitude, marker.latitude]) - .addTo(this.mapChart) - if (type === this.tooltipType.baseStation) { - this.baseStationMarkers.push(mapMarker) - } else if (type === this.tooltipType.human) { - this.humanMarkers.push(mapMarker) - } - }) + try { + data.forEach(marker => { + if (type === this.tooltipType.human && marker.subscriberDto && marker.subscriberDto.hexId) { + const geo = h3ToGeo(marker.subscriberDto.hexId) + 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([geo[1], geo[0]]) + .addTo(this.mapChart) + 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) + } }, renderTrackingMarker (coordinates) { const el = document.createElement('div') @@ -891,15 +928,20 @@ export default { } }, - bindMarkerEvent (el) { + bindMarkerEvent (el, markerData, type) { el.addEventListener('mouseenter', e => { this.currentMarkerDom = el + if (type === this.tooltipType.human) { + this.currentSubscriber = markerData + } 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.tooltip.mouseInMarkerOrTooltip = true - this.tooltip.type = this.tooltipType.baseStation + this.tooltip.type = type this.tooltip.showMarkerTooltip = true el.classList.add('map-marker--hover') }) @@ -962,6 +1004,15 @@ export default { changeCurrentShowSubscriber (subscriber) { this.currentShowSubscriber = subscriber }, + // 地图上人图标鼠标悬浮框中点击追踪事件 + trackSubscriber (subscriber) { + const find = this.trackingSubscribers.find(s => s.subscriberId === subscriber.subscriberId) + if (!find) { + this.trackingSubscribers.push({ ...subscriber, show: false, showLine: false }) + } + this.currentShowSubscriber = subscriber + this.activeTab = 'traceTracking' + }, async initDropdownList (curSearchValue) { if (curSearchValue !== '') { const params = { @@ -1113,8 +1164,21 @@ export default { }, timeFilter (n) { if (this.activeTab === 'locationMap') { + this.unbindHexagonEvents() + this.mapChart.getLayer('hexagon') && this.mapChart.removeLayer('hexagon') + this.mapChart.getSource('hexGrid') && this.mapChart.removeSource('hexGrid') + this.humanMarkers.forEach(marker => { + marker.remove && marker.remove() + }) + this.humanMarkers = [] this.initLocationMapTab() } else if (this.activeTab === 'traceTracking') { + 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.initTraceTrackingTab() } }, @@ -1216,11 +1280,11 @@ export default { // 从localStorage中获取数据 const trackingSubscribers = ref([]) - localStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(localStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id }))) + /*localStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(localStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id }))) const test = ['gary6411', 'test6431', 'test6430', 'test6422'] test.forEach(id => { trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false }) - }) + })*/ const currentShowSubscriber = ref(null) const loading = ref({ @@ -1421,17 +1485,17 @@ export default { } } &.map-marker--hover { - width: 36px; - height: 36px; + width: 30px; + height: 30px; border: 2px solid rgba(255,255,255,1); &.map-marker--human svg { - width: 23px; - height: 23px; + width: 21px; + height: 21px; } &.map-marker--base-station svg { - width: 20px; - height: 20px; + width: 18px; + height: 18px; } } }