fix: 地图上的图标禁止拖拽，增加左侧All Data点击后的定位动画，实时监控弹窗右侧图表优化

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'
       })
     },

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)

src/views/stationOperation/index.vue

@@ -136,12 +136,11 @@
         <img src="@/assets/images/station-operation/toggle-2.png" @click="leftPaneShow = true" />
       </div>
       <!-- 展开左侧配置栏按钮结束 -->
-
     </div>
     <!-- 右侧地图 -->
     <div class="station-operation-map">
       <Map
-        ref="map"
+        ref="mapRef"
         token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
       >
         <MapMarker :list="markerList" @markerClick="onMarkerClick" />
@@ -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%;
 }
 </style>
+<style>
+.ani-bounding {
+  animation: bounding 1s cubic-bezier(0.075, 0.82, 0.165, 1) 3;
+}
+
+@keyframes bounding {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+</style>