diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue index d0caa66..a5596ce 100644 --- a/src/views/stationOperation/components/MapMarker.vue +++ b/src/views/stationOperation/components/MapMarker.vue @@ -59,6 +59,7 @@ export default { const { lon, lat } = stationInfo const img = document.createElement('img') + img.draggable = false img.src = MarkerIcon[stationInfo.stationType] img.addEventListener('click', () => { this.$emit('markerClick') @@ -77,11 +78,12 @@ export default { return new Overlay({ position: fromLonLat([lon, lat]), element: img, - id: stationInfo.stationId, + id: `${stationInfo.stationType}_${stationInfo.stationId}`, positioning: 'center-center' }) }, + // 初始化波纹 initRipples() { this.list .filter( @@ -93,7 +95,7 @@ export default { }) }, - getRipple({ lon, lat, stationId }) { + getRipple({ lon, lat, stationId, stationType }) { const rippleDiv = document.createElement('div') rippleDiv.className = 'custom-ripple' @@ -104,7 +106,7 @@ export default { return new Overlay({ position: fromLonLat([lon, lat]), element: rippleDiv, - id: 'ripple_' + stationId, + id: `ripple_${stationType}_${stationId}`, positioning: 'center-center' }) }, diff --git a/src/views/stationOperation/components/RealTimeDataChart.vue b/src/views/stationOperation/components/RealTimeDataChart.vue index 40bd110..5a7b42a 100644 --- a/src/views/stationOperation/components/RealTimeDataChart.vue +++ b/src/views/stationOperation/components/RealTimeDataChart.vue @@ -152,7 +152,14 @@ export default { }, initChartOption() { - const max = new Date('2015/12/25 07:00:00').getTime() + let now = dayjs(new Date()) + now = now + .add(1, 'hour') + .set('minute', 0) + .set('second', 0) + .set('millisecond', 0) + + const max = now.valueOf() const min = max - this.scaleSettings.cacheTime * 24 * 60 * 60 * 1000 const option = cloneDeep(initialOption) const { grid, xAxis, yAxis, series, dataZoom } = option @@ -219,7 +226,11 @@ export default { item.dataList.forEach(item => { this.convertStatus(item) - const startTime = new Date(item.beginTime * 1000).getTime() + let startTime = new Date(item.beginTime * 1000).getTime() + if (item.type == 'PHD') { + startTime = item.endTime * 1000 - 60 * 1000 * 30 + } + const endTime = new Date(item.endTime * 1000).getTime() const duration = endTime - startTime const index = typeList.findIndex(type => item.type == type) diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue index 6765bab..ae5e209 100644 --- a/src/views/stationOperation/index.vue +++ b/src/views/stationOperation/index.vue @@ -136,12 +136,11 @@ -
@@ -328,8 +327,24 @@ export default { // 如果未显示,则不定位 return } - const { lon, lat } = stationItem - this.$refs.map.panTo([lon, lat]) + const { lon, lat, stationType, stationId } = stationItem + this.$refs.mapRef.panTo([lon, lat]) + + setTimeout(() => { + // 在panTo结束后执行动画 + const overlays = this.$refs.mapRef.map.getOverlays() + const currOverlay = overlays.getArray().find(item => item.id == `${stationType}_${stationId}`) + const innerEle = currOverlay.getElement() + innerEle.classList.add('ani-bounding') + + function listener() { + this.classList.remove('ani-bounding') + this.removeEventListener('animationend', listener) + } + + // 执行动画完毕,移除动画类 + innerEle.addEventListener('animationend', listener) + }, 1000) }, // 修改地图上的marker列表 @@ -587,3 +602,20 @@ export default { height: 100%; } +