From c628c029c040a99a86e4704df564ff131caf6555 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Sun, 25 Jun 2023 18:39:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9C=B0=E5=9B=BE=E4=B8=8A=E7=9A=84?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=A6=81=E6=AD=A2=E6=8B=96=E6=8B=BD=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=A6=E4=BE=A7All=20Data=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=90=8E=E7=9A=84=E5=AE=9A=E4=BD=8D=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=9E=E6=97=B6=E7=9B=91=E6=8E=A7=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=9B=BE=E8=A1=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stationOperation/components/MapMarker.vue |  8 ++--
 .../components/RealTimeDataChart.vue          | 15 ++++++-
 src/views/stationOperation/index.vue          | 40 +++++++++++++++++--
 3 files changed, 54 insertions(+), 9 deletions(-)

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 @@
         <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>