From e474ef293652c6f6da750de385c863a0a9e54df6 Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Tue, 2 Dec 2025 18:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD=E5=BE=AA?=
 =?UTF-8?q?=E7=8E=AF=20=E6=94=B9=E4=B8=BA=E5=9B=BA=E5=AE=9A=E9=80=9F?=
 =?UTF-8?q?=E5=BA=A6=E6=BB=9A=E5=8A=A8=20=E8=80=8C=E4=B8=8D=E6=98=AF?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A10=E7=A7=92=20=E8=BF=99=E6=A0=B7=E5=B0=B1?=
 =?UTF-8?q?=E4=B8=8D=E4=BC=9A=E5=9B=A0=E4=B8=BA=E5=88=97=E8=A1=A8=E9=95=BF?=
 =?UTF-8?q?=E5=BA=A6=E4=B8=8D=E5=90=8C=20=E5=AF=BC=E8=87=B4=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=80=9F=E5=BA=A6=E4=B8=8D=E5=90=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftPanel/ForcePreset.vue      | 130 ++++++++++++++----
 1 file changed, 105 insertions(+), 25 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue
index b528a4f..4609e45 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/ForcePreset.vue
@@ -102,8 +102,8 @@
           </div>
         </div>
 
-        <div class="station-list">
-          <div class="station-list-inner">
+        <div class="station-list" ref="scrollContainer">
+          <div class="station-list-inner" ref="stationListInner">
             <div
               v-for="station in forcePreset.stations"
               :key="station.id"
@@ -129,9 +129,11 @@
 </template>
 
 <script setup>
-import { ref, inject } from "vue";
+import { ref, inject, onMounted, watchEffect, nextTick } from "vue";
 
-const { forcePreset } = inject("disasterData");
+// 修改这里：直接获取 forcePreset ref 对象
+const disasterData = inject("disasterData");
+const forcePreset = disasterData.forcePreset; // 这是 ref 对象
 const onDistanceChange = inject("onDistanceChange");
 
 const viewer = inject("cesiumViewer");
@@ -197,6 +199,100 @@ const vClickOutside = {
     document.removeEventListener("click", el.clickOutsideEvent);
   },
 };
+
+const stationListInner = ref(null);
+const scrollContainer = ref(null);
+
+// 初始化滚动
+let scrollTimer1 = null;
+let scrollTimer2 = null;
+
+const initScroll = () => {
+  // 清除之前的定时器
+  if (scrollTimer1) {
+    clearTimeout(scrollTimer1);
+    scrollTimer1 = null;
+  }
+  if (scrollTimer2) {
+    clearTimeout(scrollTimer2);
+    scrollTimer2 = null;
+  }
+
+  if (
+    stationListInner.value &&
+    scrollContainer.value &&
+    forcePreset.value.stations
+  ) {
+    const content = stationListInner.value;
+    const container = scrollContainer.value;
+
+    // 强制重新计算布局
+    void content.offsetHeight;
+
+    console.log("内容高度:", content.scrollHeight);
+    console.log("容器高度:", container.clientHeight);
+
+    // 重置位置和动画
+    content.style.transition = "none";
+    content.style.transform = "translateY(0)";
+
+    // 如果内容高度大于容器高度，需要滚动
+    if (content.scrollHeight > container.clientHeight) {
+      const scrollDistance = content.scrollHeight - container.clientHeight;
+      console.log("滚动距离:", scrollDistance);
+
+      // 设置滚动动画
+      const scroll = () => {
+        console.log("开始滚动");
+        const animationDuration = scrollDistance / 20; // 2.8秒
+        content.style.transition = `transform ${animationDuration}s linear`;
+        content.style.transform = `translateY(-${scrollDistance}px)`;
+
+        // 动画结束后回到起点并暂停2秒
+        scrollTimer1 = setTimeout(() => {
+          console.log("滚动完成，回到起点");
+          content.style.transition = "none";
+          content.style.transform = "translateY(0)";
+
+          // 2秒后重新开始滚动
+          scrollTimer2 = setTimeout(() => {
+            console.log("暂停结束，重新开始滚动");
+            scroll();
+          }, 2000);
+        }, animationDuration * 1000);
+      };
+
+      // 初始暂停2秒后开始滚动
+      scrollTimer1 = setTimeout(() => {
+        console.log("初始暂停结束，开始滚动");
+        scroll();
+      }, 2000);
+    } else {
+      console.log("内容高度小于容器高度，不需要滚动");
+    }
+  } else {
+    console.log("stations未定义或DOM未准备好");
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initScroll();
+  });
+});
+
+// 使用 watchEffect 来监听 forcePreset.value.stations 的变化
+watchEffect(() => {
+  // 强制依赖 stations 数组的长度
+  const stationsLength = forcePreset.value.stations?.length || 0;
+  console.log("stations长度变化:", stationsLength);
+
+  nextTick(() => {
+    setTimeout(() => {
+      initScroll();
+    }, 100);
+  });
+});
 </script>
 
 <style scoped lang="scss">
@@ -420,27 +516,10 @@ const vClickOutside = {
           display: flex;
           flex-direction: column;
           gap: vh(8);
-          animation: scroll 10s linear infinite; // 改为10秒，包含2秒停顿
-          will-change: transform;
           padding-right: vw(4);
-          &:hover {
-            animation-play-state: paused;
-          }
-        }
-
-        
-        @keyframes scroll {
-          0% {
-            transform: translateY(0);
-          }
-          80% {
-            transform: translateY(calc(-100% + vw(120))); // 前8秒完成滚动
-          }
-          100% {
-            transform: translateY(
-              calc(-100% + vw(120))
-            ); // 后2秒保持位置（停顿）
-          }
+          /* 添加这些属性确保正确计算高度 */
+          min-height: 0;
+          flex-shrink: 0;
         }
 
         .station-item {
@@ -452,7 +531,8 @@ const vClickOutside = {
             center;
           background-size: 100% 100%;
           border-radius: vw(6);
-          flex-shrink: 0;
+          /* 移除 flex-shrink: 0 或者改为 flex-shrink: 1 */
+          flex-shrink: 1;
           .station-icon {
             width: vw(32);
             height: vh(32);