From 1797049a388d52245a2271e1594d63df6a3f16fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com> Date: Tue, 5 Mar 2024 21:57:46 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B3=BB=E5=88=97bug?= =?UTF-8?q?=E5=92=8C=E5=AE=8C=E5=96=84=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TimeLine.vue | 8 +-- src/views/location/Index.vue | 90 ++++++++++++++++++++---------- 2 files changed, 66 insertions(+), 32 deletions(-) diff --git a/src/components/common/TimeLine.vue b/src/components/common/TimeLine.vue index a8a7732e..ef096812 100644 --- a/src/components/common/TimeLine.vue +++ b/src/components/common/TimeLine.vue @@ -86,14 +86,14 @@ export default { for (let i = startTime; i <= timeFilter.endTime; i += showTimeInterval * 60 * 1000) { const obj = this.formatTime(i, showTimeInterval, timeInterval) if (obj) { - myTimeRange.push({ time: obj.time, time1: obj.time1, stamp: new Date(obj.time1).getTime(), showFlag: obj.showFlag }) + myTimeRange.push({ time: obj.time, time1: obj.time1, stamp: new Date(obj.time1).getTime(), lastStamp: new Date(obj.time1).getTime() - showTimeInterval * 60 * 1000, showFlag: obj.showFlag }) } } this.timeLine = myTimeRange if (e === 'init') { const timeObj = { - startTime: this.timeLine.slice(-1)[0].stamp - 60 * 1000, + startTime: this.timeLine.slice(-1)[0].lastStamp, endTime: this.timeLine.slice(-1)[0].stamp } this.$emit('change', timeObj) @@ -215,14 +215,14 @@ export default { if (e === 'change') { // 切换timeFilter时，选取最后一分钟 const timeObj = { - startTime: this.timeLine.slice(-1)[0].stamp - 60 * 1000, + startTime: this.timeLine.slice(-1)[0].lastStamp, endTime: this.timeLine.slice(-1)[0].stamp } this.$emit('change', timeObj) } else if (this.timeLine[e]) { // 返回所选时间后一分钟 const timeObj = { - startTime: this.timeLine[e].stamp - 60 * 1000, + startTime: this.timeLine[e].lastStamp, endTime: this.timeLine[e].stamp } this.$emit('change', timeObj) diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue index 61eb8c08..1bbfd5a2 100644 --- a/src/views/location/Index.vue +++ b/src/views/location/Index.vue @@ -141,7 +141,7 @@ -
+
{{$t('location.noTrackingYet')}}
-
- - +
+ +
@@ -384,7 +384,8 @@ export default { activeCountChain: '', curPageNum: 1, activeNames: '', - isLoadingMore: false + isLoadingMore: false, + initNum: 0 } }, components: { @@ -425,7 +426,6 @@ export default { } this.mapChart.on('load', async function () { - console.info('map loaded') // 加载地图上的基站，基站不随tab的切换而改变 const baseStationData = await _this.queryBaseStation() _this.renderMarker(baseStationData, _this.tooltipType.baseStation) @@ -482,6 +482,15 @@ export default { const find = this.trackingSubscribers.find(s => s.subscriberId === this.currentShowSubscriber.subscriberId) if (find) { this.currentShowSubscriber.trackRecords = find.trackRecords + + // 滚动条定位到id所在的dom + const findIndex = this.trackingSubscribers.findIndex(s => s.subscriberId === this.currentShowSubscriber.subscriberId) + const dom = document.getElementById('subscribersBlock') + if (findIndex && dom) { + this.$nextTick(() => { + dom.scrollTop = 207 * findIndex + }) + } } this.renderTrackingHexagon() }, @@ -651,6 +660,7 @@ export default { } else { s.trackRecords = [] } + s.show = false // 切换到track tracking时就收起时间线 }) } else { this.trackingSubscribers.forEach(s => { @@ -665,15 +675,30 @@ export default { if (i === 0) { s.trackRecords[i].stayTime = '-' } else { - const stayTime = unitConvert(s.trackRecords[i - 1].time - s.trackRecords[i].time, unitTypes.time, 's') - if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) { - stayTime[0] = Number(stayTime[0]).toFixed(0) + if ((s.trackRecords[i - 1].subscriberLongitude === s.trackRecords[i].subscriberLongitude) && (s.trackRecords[i - 1].subscriberLatitude === s.trackRecords[i].subscriberLatitude)) { + // 如果连续两条地址重复，则将时间累加，并将上一条标注repeatFlag为true，最后进行删除 + if (s.trackRecords[i - 2]) { + const stayTime = unitConvert(s.trackRecords[i - 2].time - s.trackRecords[i].time, unitTypes.time, 's') + if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) { + stayTime[0] = Number(stayTime[0]).toFixed(0) + } + s.trackRecords[i - 1].repeatFlag = true + s.trackRecords[i].stayTime = stayTime.join(' ') + } + } else { + const stayTime = unitConvert(s.trackRecords[i - 1].time - s.trackRecords[i].time, unitTypes.time, 's') + if (Number(stayTime[0]) === Number(Number(stayTime[0]).toFixed(0))) { + stayTime[0] = Number(stayTime[0]).toFixed(0) + } + s.trackRecords[i].stayTime = stayTime.join(' ') } - s.trackRecords[i].stayTime = stayTime.join(' ') } } } }) + this.trackingSubscribers.forEach(item => { + item.trackRecords = item.trackRecords.filter(dataItem => !dataItem.repeatFlag) + }) } catch (e) { this.errorMsgHandler(e) console.error(e) @@ -1031,14 +1056,16 @@ export default { } }, clickTrackBlock (i) { - this.trackingSubscribers[i].show = !this.trackingSubscribers[i].show - if (this.trackingSubscribers[i].show) { - this.trackingSubscribers[i].showLine = true - } else { - const timer = setTimeout(() => { - this.trackingSubscribers[i].showLine = false - clearTimeout(timer) - }, 200) + if (this.trackingSubscribers[i].trackRecords.length > 1) { + this.trackingSubscribers[i].show = !this.trackingSubscribers[i].show + if (this.trackingSubscribers[i].show) { + this.trackingSubscribers[i].showLine = true + } else { + const timer = setTimeout(() => { + this.trackingSubscribers[i].showLine = false + clearTimeout(timer) + }, 200) + } } }, changeCurrentShowSubscriber (subscriber) { @@ -1212,7 +1239,7 @@ export default { this.searchValueListShow = [] }, dropDownSearch (curVal) { - //this.isLoadingMore = false + // this.isLoadingMore = false this.curSearchValue = curVal this.curPageNum = 1 this.searchValueListShow = [] @@ -1225,14 +1252,19 @@ export default { } }, async minuteTimeFilterChange () { - this.humanMarkers.forEach(marker => { - marker.remove && marker.remove() - }) - this.humanMarkers = [] + // 避免初始化时请求，造成人的图标会闪一下，使用true置为false并未生效 + if (this.initNum < 1) { + this.initNum += this.initNum + } else { + this.humanMarkers.forEach(marker => { + marker.remove && marker.remove() + }) + this.humanMarkers = [] - const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber() - if (mapFollowedSubscriberData.length > 0) { - this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human) + const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber() + if (mapFollowedSubscriberData.length > 0) { + this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human) + } } } }, @@ -1304,7 +1336,6 @@ export default { trackingSubscribers: { deep: true, handler (n) { - console.info(n) sessionStorage.setItem(storageKey.trackingSubscribers, JSON.stringify(n.map(item => ({ subscriberId: item.subscriberId, subscriberDto: { phoneNumber: item.subscriberDto.phoneNumber } })))) } }, @@ -1962,11 +1993,14 @@ export default { margin-left: 4px; } } - .item-record__btn { + .item-record__btn, .item-record__btn-disabled { padding-right: 6px; cursor: pointer; text-align: center; } + .item-record__btn-disabled { + cursor: no-drop; + } } } }