From 6f2259547e731f1498611fe51366883d86c47a1a Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Tue, 25 Nov 2025 09:35:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor(3d-situational-awareness):=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=8C=96=E4=B8=BA=E5=8F=AF=E7=BB=84=E5=90=88=E6=9E=B6?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将功能提取到专用的可组合项中（useCesiumLifecycle、useEmergencyDispatch、useMapClickHandler、useMockData、usePathLines、useRangeCircle）
- 将常量分离到有组织的文件中（坐标、模拟数据、相机预设）
- 添加TypeScript类型定义以提高类型安全性
- 重构主组件以使用可组合模式，提高可维护性和性能
- 更新路由器和组件以支持新架构
---
 packages/screen/src/router/index.js           |    3 +-
 .../assets/images/IMAGE_MAPPING.md            |   13 +
 .../components/MapViewer/MapControls.vue      |    6 +-
 .../composables/useCesiumLifecycle.js         |  179 ++
 .../composables/useDualMapCompare.js          |   70 +-
 .../composables/useEmergencyDispatch.js       |  175 ++
 .../composables/useMapClickHandler.js         |  316 ++++
 .../composables/useMapMarkers.js              |    6 +-
 .../composables/useMapTooltip.js              |  128 +-
 .../composables/useMockData.js                |  175 ++
 .../composables/usePathLines.js               |  143 ++
 .../composables/useRangeCircle.js             |  114 ++
 .../constants/cameraPresets.js                |   51 +
 .../constants/coordinates.js                  |   59 +
 .../{constants.js => constants/index.js}      |   59 +-
 .../constants/mockData.js                     |  230 +++
 .../3DSituationalAwarenessRefactor/index.vue  | 1685 +++++------------
 .../types/index.ts                            |  247 +++
 18 files changed, 2425 insertions(+), 1234 deletions(-)
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useCesiumLifecycle.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEmergencyDispatch.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapClickHandler.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMockData.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/usePathLines.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/constants/cameraPresets.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/constants/coordinates.js
 rename packages/screen/src/views/3DSituationalAwarenessRefactor/{constants.js => constants/index.js} (51%)
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/constants/mockData.js
 create mode 100644 packages/screen/src/views/3DSituationalAwarenessRefactor/types/index.ts

diff --git a/packages/screen/src/router/index.js b/packages/screen/src/router/index.js
index 8b66e8f..564bfd5 100644
--- a/packages/screen/src/router/index.js
+++ b/packages/screen/src/router/index.js
@@ -48,7 +48,8 @@ const routes = [
     path: '/3DSituationalAwareness',
     name: '3DSituationalAwareness',
     meta: {
-      screen: true
+      screen: true,
+      skipInitialCameraView: true  // 跳过MapViewport的自动初始视图，由页面自己控制相机
     },
     component: () => import('../views/3DSituationalAwarenessRefactor/index.vue')
   }
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/IMAGE_MAPPING.md b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/IMAGE_MAPPING.md
index de6c6dc..f44d3d3 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/IMAGE_MAPPING.md
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/assets/images/IMAGE_MAPPING.md
@@ -44,3 +44,16 @@ video-placeholder.png -> SketchPngb3b734375de691a8ba794eee7807988d78f942877ab220
 ## 调度建议
 suggestion-icon.png -> SketchPng08ea47fd72e32082154366a0cbcd9a701074a835d3bae2eb9237b81b2ae775a6.png
 suggestion-bg.png -> SketchPng84e383eb0cfecb67b9a0068cf2c81514a13efe72d2ac102b28c4739dfd5bacf6.png
+
+## 视频弹窗（VideoModal）
+video-control-megaphone.png -> SketchPngb86960bc4bc265d41dd03a8ed7c4b084ccd30fc7752088f3d2baad4a44f88489.png (喊话按钮)
+video-control-sound.png -> sound.png (声音按钮)
+video-control-zoom.png -> SketchPngb9171160837b0b4a4cdb277aca92389cebb62399608ed3a54dcbf23d0d2d3cac.png (放大按钮)
+video-modal-close.png -> SketchPngf4cb9473415706d94e50d55177de9ed164db9069c3f3edbb335dcf024c256079.png (关闭按钮)
+video-control-left.png -> SketchPng71c4b50fd627cc955d56e657283137361fc216fad2fcb9affeeaaf01b5e3c42e.png (左移)
+video-control-right.png -> SketchPng26e936be527abaab4e5b33e1f766c40c1cc5158017be8ea6d500855e5140ff7e.png (右移)
+video-control-up.png -> SketchPnge0ff29f6a2cb4a26ebd039f7f58582dbc374f394dc30f74075b7b4e54936ad07.png (上移)
+video-control-down.png -> SketchPng0c55ea03b39c80c7bd871acc9717b47a6e59c01173e8411d0d57619ac7aeda3c.png (下移)
+video-control-console.png -> 操作台.png (操作台背景)
+video-control-shrink.png -> 缩小.png (缩小按钮)
+video-modal-title-bg.png -> titlebg.png (弹窗标题背景)
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue
index 8c195ab..b4d094c 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/MapViewer/MapControls.vue
@@ -42,13 +42,13 @@
 
 <script setup>
 import { ref } from "vue";
-import { MAP_TOOLS, DEVICE_WATCH } from "../../constants.js";
+import { MAP_TOOLS, DEVICE_WATCH } from "../../constants";
 
 // 卫星设备观看状态
 const isWatchingDevice = ref(false);
 
-// 当前激活的测量工具
-const activeTool = ref(null);
+// 当前激活的测量工具（默认激活模型对比）
+const activeTool = ref('modelCompare');
 
 // 定义对外事件
 const emit = defineEmits(["device-watch", "tool-change"]);
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useCesiumLifecycle.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useCesiumLifecycle.js
new file mode 100644
index 0000000..d2a0b26
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useCesiumLifecycle.js
@@ -0,0 +1,179 @@
+import { ref, onUnmounted } from 'vue';
+
+/**
+ * Cesium 资源生命周期管理
+ *
+ * 职责：
+ * 1. 统一管理 Cesium 事件监听器的注册和清理
+ * 2. 管理 ScreenSpaceEventHandler 的生命周期
+ * 3. 管理定时器和动画帧的清理
+ * 4. 防止内存泄漏和 WebGL 资源耗尽
+ *
+ * @returns {Object} 资源管理 API
+ */
+export function useCesiumLifecycle() {
+  // 存储所有需要清理的资源
+  const eventHandlers = ref([]);
+  const postRenderListeners = ref([]);
+  const timeouts = ref([]);
+  const intervals = ref([]);
+  const animationFrames = ref([]);
+
+  /**
+   * 注册 ScreenSpaceEventHandler
+   * @param {Cesium.ScreenSpaceEventHandler} handler - 事件处理器
+   */
+  const registerEventHandler = (handler) => {
+    if (handler && !eventHandlers.value.includes(handler)) {
+      eventHandlers.value.push(handler);
+    }
+  };
+
+  /**
+   * 注册 postRender 监听器
+   * @param {Cesium.Scene} scene - Cesium 场景
+   * @param {Function} callback - 回调函数
+   * @returns {Function} 移除监听器的函数
+   */
+  const registerPostRenderListener = (scene, callback) => {
+    if (!scene || !callback) {
+      console.warn('[useCesiumLifecycle] 无效的 scene 或 callback');
+      return () => {};
+    }
+
+    // 添加监听器
+    scene.postRender.addEventListener(callback);
+
+    // 保存引用
+    const listener = { scene, callback };
+    postRenderListeners.value.push(listener);
+
+    // 返回移除函数
+    return () => {
+      scene.postRender.removeEventListener(callback);
+      const index = postRenderListeners.value.indexOf(listener);
+      if (index > -1) {
+        postRenderListeners.value.splice(index, 1);
+      }
+    };
+  };
+
+  /**
+   * 注册定时器
+   * @param {number} timeoutId - setTimeout 返回的 ID
+   */
+  const registerTimeout = (timeoutId) => {
+    if (timeoutId) {
+      timeouts.value.push(timeoutId);
+    }
+  };
+
+  /**
+   * 注册间隔定时器
+   * @param {number} intervalId - setInterval 返回的 ID
+   */
+  const registerInterval = (intervalId) => {
+    if (intervalId) {
+      intervals.value.push(intervalId);
+    }
+  };
+
+  /**
+   * 注册动画帧
+   * @param {number} frameId - requestAnimationFrame 返回的 ID
+   */
+  const registerAnimationFrame = (frameId) => {
+    if (frameId) {
+      animationFrames.value.push(frameId);
+    }
+  };
+
+  /**
+   * 清理所有注册的资源
+   */
+  const cleanup = () => {
+    console.log('[useCesiumLifecycle] 开始清理资源...');
+
+    // 1. 销毁所有事件处理器
+    eventHandlers.value.forEach((handler) => {
+      try {
+        if (handler && !handler.isDestroyed()) {
+          handler.destroy();
+        }
+      } catch (error) {
+        console.error('[useCesiumLifecycle] 销毁事件处理器失败:', error);
+      }
+    });
+    eventHandlers.value = [];
+
+    // 2. 移除所有 postRender 监听器
+    postRenderListeners.value.forEach(({ scene, callback }) => {
+      try {
+        if (scene && callback) {
+          scene.postRender.removeEventListener(callback);
+        }
+      } catch (error) {
+        console.error('[useCesiumLifecycle] 移除 postRender 监听器失败:', error);
+      }
+    });
+    postRenderListeners.value = [];
+
+    // 3. 清除所有定时器
+    timeouts.value.forEach((timeoutId) => {
+      try {
+        clearTimeout(timeoutId);
+      } catch (error) {
+        console.error('[useCesiumLifecycle] 清除定时器失败:', error);
+      }
+    });
+    timeouts.value = [];
+
+    // 4. 清除所有间隔定时器
+    intervals.value.forEach((intervalId) => {
+      try {
+        clearInterval(intervalId);
+      } catch (error) {
+        console.error('[useCesiumLifecycle] 清除间隔定时器失败:', error);
+      }
+    });
+    intervals.value = [];
+
+    // 5. 取消所有动画帧
+    animationFrames.value.forEach((frameId) => {
+      try {
+        cancelAnimationFrame(frameId);
+      } catch (error) {
+        console.error('[useCesiumLifecycle] 取消动画帧失败:', error);
+      }
+    });
+    animationFrames.value = [];
+
+    console.log('[useCesiumLifecycle] 资源清理完成');
+  };
+
+  // 组件卸载时自动清理
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    // 注册方法
+    registerEventHandler,
+    registerPostRenderListener,
+    registerTimeout,
+    registerInterval,
+    registerAnimationFrame,
+
+    // 清理方法
+    cleanup,
+
+    // 状态（用于调试）
+    getResourceCount: () => ({
+      eventHandlers: eventHandlers.value.length,
+      postRenderListeners: postRenderListeners.value.length,
+      timeouts: timeouts.value.length,
+      intervals: intervals.value.length,
+      animationFrames: animationFrames.value.length,
+    }),
+  };
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js
index 05e6a61..8b8517b 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useDualMapCompare.js
@@ -40,6 +40,15 @@ export function useDualMapCompare() {
       return null
     }
 
+    // 验证容器尺寸
+    const { clientWidth, clientHeight } = container
+    console.log(`[useDualMapCompare] 左侧容器尺寸: ${clientWidth}x${clientHeight}`)
+
+    if (clientWidth <= 0 || clientHeight <= 0) {
+      console.error(`[useDualMapCompare] 左侧容器尺寸无效 (width=${clientWidth}, height=${clientHeight})`)
+      return null
+    }
+
     // 创建左侧viewer
     const viewer = new Cesium.Viewer(container, {
       animation: false,
@@ -126,13 +135,33 @@ export function useDualMapCompare() {
   /**
    * 启用对比模式
    * @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer实例（主地图，灾后场景）
+   * @param {Object} options - 配置选项
+   * @param {boolean} options.skipLeftModelLoad - 是否跳过左侧模型加载
+   * @param {boolean} options.loadLeftModel - 是否仅加载左侧模型（不重新初始化Viewer）
    */
-  const enableCompareMode = async (rightViewerInstance) => {
+  const enableCompareMode = async (rightViewerInstance, options = {}) => {
+    const { skipLeftModelLoad = false, loadLeftModel = false } = options
+
     if (!rightViewerInstance) {
       console.error('[useDualMapCompare] 右侧主地图Viewer未初始化')
       return
     }
 
+    // 如果只是加载左侧模型（Viewer已存在）
+    if (loadLeftModel && leftViewer.value) {
+      console.log('[useDualMapCompare] 加载左侧灾前模型...')
+      try {
+        const tileset = await load3DTileset(leftViewer.value, 'before', false)
+        if (tileset) {
+          leftTileset = tileset
+          console.log('[useDualMapCompare] 左侧灾前模型加载完成')
+        }
+      } catch (error) {
+        console.error('[useDualMapCompare] 左侧模型加载失败:', error)
+      }
+      return
+    }
+
     console.log('[useDualMapCompare] 启用对比模式...')
 
     rightViewer.value = rightViewerInstance
@@ -147,8 +176,8 @@ export function useDualMapCompare() {
     // 先设置状态，触发CSS动画
     isCompareMode.value = true
 
-    // 等待一小段时间让CSS过渡开始
-    await new Promise(resolve => setTimeout(resolve, 50))
+    // 等待CSS过渡完成（300ms + 50ms buffer）
+    await new Promise(resolve => setTimeout(resolve, 350))
 
     // 初始化左侧Viewer
     const leftViewerInstance = initLeftViewer(leftContainer)
@@ -173,19 +202,23 @@ export function useDualMapCompare() {
     // 设置相机同步（单向：右→左）
     setupCameraSync(rightViewerInstance, leftViewerInstance)
 
-    // 异步加载灾前模型到左侧（不阻塞对比模式启用）
-    // 让模型在后台加载，用户可以立即看到对比效果
-    console.log('[useDualMapCompare] 开始异步加载左侧灾前模型...')
-    load3DTileset(leftViewerInstance, 'before', false)
-      .then(tileset => {
-        if (tileset) {
-          leftTileset = tileset
-          console.log('[useDualMapCompare] 左侧灾前模型加载完成')
-        }
-      })
-      .catch(error => {
-        console.error('[useDualMapCompare] 左侧模型加载失败:', error)
-      })
+    // 根据选项决定是否加载左侧模型
+    if (!skipLeftModelLoad) {
+      // 异步加载灾前模型到左侧（不阻塞对比模式启用）
+      console.log('[useDualMapCompare] 开始异步加载左侧灾前模型...')
+      load3DTileset(leftViewerInstance, 'before', false)
+        .then(tileset => {
+          if (tileset) {
+            leftTileset = tileset
+            console.log('[useDualMapCompare] 左侧灾前模型加载完成')
+          }
+        })
+        .catch(error => {
+          console.error('[useDualMapCompare] 左侧模型加载失败:', error)
+        })
+    } else {
+      console.log('[useDualMapCompare] 跳过左侧模型加载（将延迟加载）')
+    }
 
     // 右侧保持灾后模型（已加载）
 
@@ -246,10 +279,11 @@ export function useDualMapCompare() {
    * 切换对比模式
    * @param {boolean} active - true启用，false禁用
    * @param {Cesium.Viewer} rightViewerInstance - 右侧Viewer实例（主地图）
+   * @param {Object} options - 配置选项（传递给 enableCompareMode）
    */
-  const toggleCompareMode = async (active, rightViewerInstance) => {
+  const toggleCompareMode = async (active, rightViewerInstance, options) => {
     if (active) {
-      await enableCompareMode(rightViewerInstance)
+      await enableCompareMode(rightViewerInstance, options)
     } else {
       disableCompareMode()
     }
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEmergencyDispatch.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEmergencyDispatch.js
new file mode 100644
index 0000000..b492a71
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEmergencyDispatch.js
@@ -0,0 +1,175 @@
+import { ref } from 'vue'
+import * as Cesium from 'cesium'
+import { ANIMATION_CONFIG, ANIMATION_PATHS } from '../constants'
+
+/**
+ * 应急调度流程管理
+ *
+ * 职责：
+ * 1. 管理"一键启动"完整流程
+ * 2. 协调 loading 动画、路径线绘制、人员移动动画
+ * 3. 管理相机飞行到全景位置
+ * 4. 清理路径起点标记
+ *
+ * @param {Object} dependencies - 依赖的 composables
+ * @param {Object} dependencies.pathLinesComposable - usePathLines 返回的对象
+ * @param {Object} dependencies.entityAnimationComposable - useEntityAnimation 返回的对象
+ * @param {Object} dependencies.mapStore - 地图 store
+ * @param {Function} dependencies.registerTimeoutFn - 注册定时器的函数（来自 useCesiumLifecycle）
+ * @returns {Object} 应急调度 API
+ */
+export function useEmergencyDispatch({
+  pathLinesComposable,
+  entityAnimationComposable,
+  mapStore,
+  registerTimeoutFn,
+}) {
+  const { drawAllPathLines } = pathLinesComposable
+  const { startPersonnelMovement, startMultipleMovements, isAnimating } =
+    entityAnimationComposable
+
+  // Loading 状态
+  const showLoading = ref(false)
+
+  /**
+   * 启动应急调度流程
+   * @param {Object} payload - 调度参数
+   */
+  const startDispatch = (payload) => {
+    console.log('[useEmergencyDispatch] 启动力量调度:', payload)
+
+    // 防止重复启动
+    if (isAnimating.value) {
+      console.warn('[useEmergencyDispatch] 动画正在运行，忽略重复启动')
+      return
+    }
+
+    const viewer = mapStore.viewer
+    if (!viewer) {
+      console.error('[useEmergencyDispatch] viewer 未就绪')
+      return
+    }
+
+    // 1. 显示 loading 动画
+    showLoading.value = true
+
+    // 2. 绘制红色路径线
+    drawAllPathLines(viewer, {
+      color: Cesium.Color.RED,
+      width: 5,
+      clampToGround: true,
+    })
+
+    // 3. 延迟执行后续步骤
+    const timeoutId = setTimeout(() => {
+      executeDispatchSteps(viewer)
+    }, ANIMATION_CONFIG.loadingDuration)
+
+    // 注册定时器到生命周期管理
+    registerTimeoutFn(timeoutId)
+  }
+
+  /**
+   * 执行调度步骤
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   */
+  const executeDispatchSteps = (viewer) => {
+    // 1. 隐藏 loading 动画
+    showLoading.value = false
+
+    // 2. 移除路径起点标记
+    removePathStartMarkers(viewer)
+
+    // 3. 启动人员移动动画
+    startPersonnelMovement(viewer, {
+      duration: ANIMATION_CONFIG.duration,
+      trackEntity: false,
+      personnelName: '应急救援人员',
+      department: '应急救援队',
+    })
+
+    // 4. 启动多组移动动画
+    startMultipleMovements(viewer, {
+      duration: ANIMATION_CONFIG.duration,
+    })
+
+    // 5. 相机飞向全景位置
+    flyToOverviewPosition()
+  }
+
+  /**
+   * 移除路径起点标记
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   */
+  const removePathStartMarkers = (viewer) => {
+    const entitiesToRemove = []
+
+    viewer.entities.values.forEach((entity) => {
+      if (entity.properties && entity.properties.isPathStartMarker) {
+        entitiesToRemove.push(entity)
+      }
+    })
+
+    entitiesToRemove.forEach((entity) => {
+      viewer.entities.remove(entity)
+    })
+
+    console.log(`[useEmergencyDispatch] 已移除 ${entitiesToRemove.length} 个路径起点标记`)
+  }
+
+  /**
+   * 相机飞向全景位置
+   * 计算能看到所有路径的最佳视角
+   */
+  const flyToOverviewPosition = () => {
+    const { camera } = mapStore.services()
+
+    console.log('[useEmergencyDispatch] 相机缓慢飞向最佳全景位置...')
+
+    // 收集所有路径的起点和终点
+    const allPathPoints = []
+
+    Object.values(ANIMATION_PATHS).forEach((path) => {
+      const { startPoint, waypoints } = path
+
+      // 起点
+      allPathPoints.push(
+        new Cesium.Cartesian3(startPoint.x, startPoint.y, startPoint.z)
+      )
+
+      // 终点
+      const endPoint = waypoints[waypoints.length - 1]
+      allPathPoints.push(new Cesium.Cartesian3(endPoint.x, endPoint.y, endPoint.z))
+    })
+
+    // 转换为经纬度格式
+    const trajectoryPoints = allPathPoints.map((point) => {
+      const cartographic = Cesium.Cartographic.fromCartesian(point)
+      return {
+        lon: Cesium.Math.toDegrees(cartographic.longitude),
+        lat: Cesium.Math.toDegrees(cartographic.latitude),
+      }
+    })
+
+    // 使用智能聚焦方法飞向能看到所有路径的最佳位置
+    camera.fitBoundsWithTrajectory(trajectoryPoints, {
+      duration: ANIMATION_CONFIG.cameraFlyDuration,
+      padding: ANIMATION_CONFIG.cameraPadding,
+    })
+  }
+
+  /**
+   * 停止调度流程
+   */
+  const stopDispatch = () => {
+    showLoading.value = false
+    // 停止动画由 useEntityAnimation 管理
+    console.log('[useEmergencyDispatch] 调度流程已停止')
+  }
+
+  return {
+    showLoading,
+    startDispatch,
+    stopDispatch,
+  }
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapClickHandler.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapClickHandler.js
new file mode 100644
index 0000000..776ca59
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapClickHandler.js
@@ -0,0 +1,316 @@
+import * as Cesium from 'cesium'
+import { ref } from 'vue'
+import { MOCK_VIDEO_URL } from '../constants'
+
+/**
+ * 地图点击事件处理
+ *
+ * 职责：
+ * 1. 管理地图点击事件监听器
+ * 2. 处理标记点点击逻辑
+ * 3. 显示 Tooltip 和详情弹窗
+ *
+ * @param {Object} options - 配置选项
+ * @param {Object} options.tooltipComposable - useMapTooltip 返回的对象
+ * @param {Object} options.icons - 图标资源对象
+ * @param {Ref} options.rangeCircleEntity - 范围圈实体引用
+ * @returns {Object} 点击处理 API
+ */
+export function useMapClickHandler({ tooltipComposable, icons, rangeCircleEntity }) {
+  const { showTooltip, hideTooltip, enableEntityTracking } = tooltipComposable
+
+  // 事件处理器引用
+  let eventHandler = null
+
+  /**
+   * 设置地图点击事件处理器
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Function} registerEventHandlerFn - 注册事件处理器的函数（来自 useCesiumLifecycle）
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数（来自 useCesiumLifecycle）
+   */
+  const setupClickHandler = (viewer, registerEventHandlerFn, registerPostRenderFn) => {
+    if (!viewer) {
+      console.warn('[useMapClickHandler] viewer 为空')
+      return
+    }
+
+    // 创建事件处理器
+    eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+
+    // 注册到生命周期管理
+    registerEventHandlerFn(eventHandler)
+
+    // 监听左键点击事件
+    eventHandler.setInputAction((click) => {
+      handleMapClick(viewer, click, registerPostRenderFn)
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    console.log('[useMapClickHandler] 地图点击事件监听器已设置')
+  }
+
+  /**
+   * 处理地图点击事件
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Object} click - 点击事件对象
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数
+   */
+  const handleMapClick = (viewer, click, registerPostRenderFn) => {
+    // 获取点击位置的实体
+    const pickedObject = viewer.scene.pick(click.position)
+
+    if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
+      const entity = pickedObject.id
+
+      // 过滤掉范围圈实体
+      if (entity === rangeCircleEntity.value) {
+        console.log('[useMapClickHandler] 点击了范围圈，尝试穿透')
+        handleRangeCircleClick(viewer, click, registerPostRenderFn)
+        return
+      }
+
+      // 检查实体是否有 properties（标记点才有）
+      if (entity.properties) {
+        const type = entity.properties.type?.getValue()
+        handleMarkerClick(viewer, entity, type, click, registerPostRenderFn)
+      }
+    } else {
+      // 点击空白区域，隐藏 Tooltip
+      hideTooltip()
+    }
+  }
+
+  /**
+   * 处理范围圈点击（穿透到下面的实体）
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Object} click - 点击事件对象
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数
+   */
+  const handleRangeCircleClick = (viewer, click, registerPostRenderFn) => {
+    const drillPickedObjects = viewer.scene.drillPick(click.position)
+
+    for (const pickedObj of drillPickedObjects) {
+      if (Cesium.defined(pickedObj.id) && pickedObj.id !== rangeCircleEntity.value) {
+        const markerEntity = pickedObj.id
+        if (markerEntity.properties) {
+          const type = markerEntity.properties.type?.getValue()
+          handleMarkerClick(viewer, markerEntity, type, click, registerPostRenderFn)
+          return
+        }
+      }
+    }
+
+    // 没有找到标记点，隐藏 Tooltip
+    hideTooltip()
+  }
+
+  /**
+   * 处理标记点点击
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Cesium.Entity} entity - 被点击的实体
+   * @param {string} type - 标记类型
+   * @param {Object} click - 点击事件对象
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数
+   */
+  const handleMarkerClick = (viewer, entity, type, click, registerPostRenderFn) => {
+    let icon = null
+
+    // 根据类型选择图标
+    if (type === 'soldier') {
+      icon = icons.soldierIcon
+    } else if (type === 'device') {
+      icon = icons.deviceIcon
+    } else if (type === 'emergencyBase' || type === 'station') {
+      const stationName = entity.properties.name?.getValue() || ''
+      icon =
+        stationName === '忠县公路交通应急物资储备中心'
+          ? icons.emergencyCenterIcon
+          : icons.emergencyBaseIcon
+    } else if (type === 'reserveCenter' || type === 'presetPoint') {
+      icon = type === 'reserveCenter' ? icons.reserveCenterIcon : icons.emergencyBaseIcon
+    }
+
+    if (icon) {
+      showMarkerTooltip(viewer, entity, icon, registerPostRenderFn)
+    }
+  }
+
+  /**
+   * 显示标记点 Tooltip
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Cesium.Entity} entity - 被点击的实体
+   * @param {string} icon - 图标路径
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数
+   */
+  const showMarkerTooltip = (viewer, entity, icon, registerPostRenderFn) => {
+    const properties = entity.properties
+    const type = properties.type?.getValue()
+
+    // 获取实体的 3D 位置
+    const position = entity.position?.getValue(Cesium.JulianDate.now())
+    if (!position) {
+      console.warn('[useMapClickHandler] 无法获取实体位置')
+      return
+    }
+
+    // 获取地形高度
+    const cartographic = Cesium.Cartographic.fromCartesian(position)
+    let clampedPosition = position
+
+    if (viewer.scene.globe) {
+      const height = viewer.scene.globe.getHeight(cartographic)
+      if (Cesium.defined(height)) {
+        cartographic.height = height
+        clampedPosition = Cesium.Cartographic.toCartesian(cartographic)
+      }
+    }
+
+    // 转换为屏幕坐标
+    const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition)
+    if (!Cesium.defined(canvasPosition)) {
+      console.warn('[useMapClickHandler] 无法转换坐标到屏幕位置')
+      return
+    }
+
+    // 计算容器偏移，将 canvas 本地坐标转换为视口坐标
+    // 在对比模式下，右侧 canvas 相对于视口有 50% 的偏移
+    const canvas = viewer.scene.canvas
+    const containerRect = canvas.getBoundingClientRect()
+    const viewportX = canvasPosition.x + containerRect.left
+    const viewportY = canvasPosition.y + containerRect.top
+
+    // 构建 Tooltip 数据
+    const tooltipData = buildTooltipData(type, properties)
+
+    // 显示 Tooltip（使用视口坐标）
+    showTooltip({
+      x: viewportX,
+      y: viewportY,
+      title: tooltipData.title,
+      icon,
+      data: tooltipData.data,
+      entity, // 传递实体用于位置跟踪
+    })
+
+    // 启用实体位置跟踪
+    enableEntityTracking(viewer, registerPostRenderFn)
+  }
+
+  /**
+   * 构建 Tooltip 数据
+   * @param {string} type - 标记类型
+   * @param {Object} properties - 实体属性
+   * @returns {Object} Tooltip 数据
+   */
+  const buildTooltipData = (type, properties) => {
+    let title = ''
+    const fields = []
+    const actions = []
+    let supportVideo = false
+    let videoTitle = ''
+    const videoSrc = MOCK_VIDEO_URL
+
+    if (type === 'soldier') {
+      // 应急人员
+      title = '应急人员'
+      fields.push(
+        { label: '姓名', value: properties.name?.getValue() || '-' },
+        { label: '部门', value: properties.department?.getValue() || '-' },
+        { label: '位置信息', value: properties.location?.getValue() || '-' },
+        { label: '预计到达时间', value: properties.estimatedArrival?.getValue() || '-' }
+      )
+      actions.push({
+        label: '联动',
+        type: 'link',
+        data: properties,
+      })
+    } else if (type === 'device') {
+      // 应急装备
+      title = '应急装备'
+      fields.push(
+        { label: '设备名称', value: properties.name?.getValue() || '-' },
+        { label: '设备类型', value: properties.deviceType?.getValue() || '-' },
+        { label: '位置信息', value: properties.location?.getValue() || '-' },
+        { label: '预计到达时间', value: properties.estimatedArrival?.getValue() || '-' }
+      )
+    } else if (type === 'emergencyBase') {
+      // 应急基地
+      title = '应急基地'
+      fields.push(
+        { label: '基地名称', value: properties.name?.getValue() || '-' },
+        { label: '路线编号', value: properties.routeNumber?.getValue() || '-' },
+        { label: '隶属单位', value: properties.department?.getValue() || '-' },
+        { label: '位置信息', value: properties.location?.getValue() || '-' }
+      )
+      actions.push({
+        label: '连线',
+        type: 'connect',
+        data: properties,
+      })
+    } else if (type === 'station') {
+      const stationName = properties.name?.getValue() || ''
+      const distance = properties.distance?.getValue() || 0
+
+      if (stationName === '忠县公路交通应急物资储备中心') {
+        title = '应急中心'
+        fields.push(
+          { label: '名称', value: '忠县应急中心' },
+          { label: '行政等级', value: '国道' },
+          { label: '隶属单位', value: '交通公路部门' },
+          { label: '位置信息', value: `目前为止距离现场${distance}公里` }
+        )
+        supportVideo = true
+        videoTitle = '应急中心'
+      } else {
+        title = '养护站'
+        fields.push(
+          { label: '名称', value: stationName || '-' },
+          { label: '距离', value: `${distance}公里` }
+        )
+      }
+    } else if (type === 'reserveCenter') {
+      // 储备中心
+      title = '储备中心'
+      fields.push(
+        { label: '名称', value: properties.name?.getValue() || '-' },
+        { label: '位置信息', value: properties.location?.getValue() || '-' }
+      )
+      supportVideo = true
+      videoTitle = '储备中心'
+    } else if (type === 'presetPoint') {
+      // 预置点
+      title = '预置点'
+      fields.push(
+        { label: '名称', value: properties.name?.getValue() || '-' },
+        { label: '位置信息', value: properties.location?.getValue() || '-' }
+      )
+      supportVideo = true
+      videoTitle = '预置点'
+    }
+
+    return {
+      title,
+      data: {
+        fields,
+        actions: actions.length > 0 ? actions : undefined,
+        supportVideo,
+        videoTitle,
+        videoSrc,
+      },
+    }
+  }
+
+  /**
+   * 销毁事件处理器
+   */
+  const destroy = () => {
+    if (eventHandler && !eventHandler.isDestroyed()) {
+      eventHandler.destroy()
+      eventHandler = null
+    }
+  }
+
+  return {
+    setupClickHandler,
+    destroy,
+  }
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
index eefbab7..1262475 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapMarkers.js
@@ -654,8 +654,7 @@ export function useMapMarkers() {
           width: 48,
           height: 48,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          heightReference: resolveBillboardHeightReference(result.samplingSucceeded),
-          disableDepthTestDistance: Number.POSITIVE_INFINITY
+          heightReference: resolveBillboardHeightReference(result.samplingSucceeded)
         },
         properties: {
           type,
@@ -742,8 +741,7 @@ export function useMapMarkers() {
             width: 48,
             height: 48,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-            heightReference: resolveBillboardHeightReference(result.samplingSucceeded),
-            disableDepthTestDistance: Number.POSITIVE_INFINITY
+            heightReference: resolveBillboardHeightReference(result.samplingSucceeded)
           },
           properties: {
             type: 'station',
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapTooltip.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapTooltip.js
index d4d31dc..b3d543f 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapTooltip.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMapTooltip.js
@@ -1,8 +1,14 @@
 import { ref } from 'vue'
+import * as Cesium from 'cesium'
 
 /**
- * 地图 Tooltip 状态管理
+ * 地图 Tooltip 状态管理（性能优化版）
  * 用于显示地图标记点的轻量级信息提示框
+ *
+ * 性能优化：
+ * 1. 只在 tooltip 可见时注册 postRender 监听器
+ * 2. 缓存地形高度计算结果
+ * 3. 使用节流避免过度更新
  */
 export function useMapTooltip() {
   // Tooltip 状态
@@ -16,6 +22,15 @@ export function useMapTooltip() {
     data: null // 业务数据，用于内容插槽渲染
   })
 
+  // 当前跟踪的实体
+  const currentEntity = ref(null)
+
+  // postRender 监听器移除函数
+  let removePostRenderListener = null
+
+  // 地形高度缓存（避免重复采样）
+  const terrainHeightCache = new Map()
+
   /**
    * 显示 Tooltip
    * @param {Object} options - Tooltip 配置选项
@@ -24,8 +39,9 @@ export function useMapTooltip() {
    * @param {string} [options.title=''] - Tooltip 标题文本
    * @param {string} [options.icon=''] - 标题左侧图标的图片路径
    * @param {Object} [options.data=null] - 业务数据
+   * @param {Cesium.Entity} [options.entity=null] - 关联的实体（用于位置跟踪）
    */
-  const showTooltip = ({ x, y, title = '', icon = '', data = null }) => {
+  const showTooltip = ({ x, y, title = '', icon = '', data = null, entity = null }) => {
     tooltipState.value = {
       visible: true,
       x,
@@ -35,6 +51,9 @@ export function useMapTooltip() {
       zIndex: 20,
       data
     }
+
+    // 保存关联的实体
+    currentEntity.value = entity
   }
 
   /**
@@ -42,6 +61,16 @@ export function useMapTooltip() {
    */
   const hideTooltip = () => {
     tooltipState.value.visible = false
+    currentEntity.value = null
+
+    // 移除 postRender 监听器（性能优化）
+    if (removePostRenderListener) {
+      removePostRenderListener()
+      removePostRenderListener = null
+    }
+
+    // 清空地形高度缓存
+    terrainHeightCache.clear()
   }
 
   /**
@@ -50,14 +79,103 @@ export function useMapTooltip() {
    * @param {number} y - 屏幕 Y 坐标
    */
   const updateTooltipPosition = (x, y) => {
-    tooltipState.value.x = x
-    tooltipState.value.y = y
+    if (tooltipState.value.visible) {
+      tooltipState.value.x = x
+      tooltipState.value.y = y
+    }
+  }
+
+  /**
+   * 启用实体位置跟踪（性能优化版）
+   * 只在 tooltip 可见时注册 postRender 监听器
+   *
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Function} registerPostRenderFn - 注册 postRender 的函数（来自 useCesiumLifecycle）
+   */
+  const enableEntityTracking = (viewer, registerPostRenderFn) => {
+    if (!viewer || !registerPostRenderFn) {
+      console.warn('[useMapTooltip] 无效的 viewer 或 registerPostRenderFn')
+      return
+    }
+
+    // 如果已经有监听器，先移除
+    if (removePostRenderListener) {
+      removePostRenderListener()
+    }
+
+    // 创建更新回调（带缓存优化）
+    const updateCallback = () => {
+      if (!currentEntity.value || !tooltipState.value.visible) {
+        return
+      }
+
+      const entity = currentEntity.value
+      const position = entity.position?.getValue(Cesium.JulianDate.now())
+
+      if (!position) return
+
+      // 获取地形高度（带缓存）
+      const cartographic = Cesium.Cartographic.fromCartesian(position)
+      const cacheKey = `${cartographic.longitude.toFixed(6)}_${cartographic.latitude.toFixed(6)}`
+
+      let clampedPosition = position
+
+      if (!terrainHeightCache.has(cacheKey)) {
+        // 首次采样，缓存结果
+        if (viewer.scene.globe) {
+          const height = viewer.scene.globe.getHeight(cartographic)
+          if (Cesium.defined(height)) {
+            cartographic.height = height
+            clampedPosition = Cesium.Cartographic.toCartesian(cartographic)
+            terrainHeightCache.set(cacheKey, clampedPosition)
+          }
+        }
+      } else {
+        // 使用缓存的高度
+        clampedPosition = terrainHeightCache.get(cacheKey)
+      }
+
+      // 转换为屏幕坐标
+      const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition)
+
+      // 如果标记点在视野外，隐藏 tooltip
+      if (!Cesium.defined(canvasPosition)) {
+        hideTooltip()
+        return
+      }
+
+      // 计算容器偏移，将 canvas 本地坐标转换为视口坐标
+      const canvas = viewer.scene.canvas
+      const containerRect = canvas.getBoundingClientRect()
+      const viewportX = canvasPosition.x + containerRect.left
+      const viewportY = canvasPosition.y + containerRect.top
+
+      // 更新位置（使用视口坐标）
+      updateTooltipPosition(viewportX, viewportY)
+    }
+
+    // 注册监听器
+    removePostRenderListener = registerPostRenderFn(viewer.scene, updateCallback)
+  }
+
+  /**
+   * 禁用实体位置跟踪
+   */
+  const disableEntityTracking = () => {
+    if (removePostRenderListener) {
+      removePostRenderListener()
+      removePostRenderListener = null
+    }
+    terrainHeightCache.clear()
   }
 
   return {
     tooltipState,
+    currentEntity,
     showTooltip,
     hideTooltip,
-    updateTooltipPosition
+    updateTooltipPosition,
+    enableEntityTracking,
+    disableEntityTracking
   }
 }
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMockData.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMockData.js
new file mode 100644
index 0000000..136bec3
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useMockData.js
@@ -0,0 +1,175 @@
+import * as Cesium from 'cesium'
+import {
+  MOCK_PERSONNEL_POINTS,
+  MOCK_DEVICE_POINTS,
+  ANIMATION_PATHS,
+  MOCK_VIDEO_URL,
+  MARKER_ICON_SIZE,
+} from '../constants'
+
+/**
+ * 模拟数据服务
+ *
+ * 职责：
+ * 1. 提供类型安全的模拟数据访问
+ * 2. 将原始数据转换为 Cesium 实体配置
+ * 3. 便于后续替换为真实 API
+ *
+ * @returns {Object} 模拟数据 API
+ */
+export function useMockData() {
+  /**
+   * 获取模拟人员点位数据
+   * @returns {Array} 人员点位数组
+   */
+  const getPersonnelPoints = () => {
+    return MOCK_PERSONNEL_POINTS.map((point) => ({
+      ...point,
+      location: `目前为止距离现场${point.distance}公里`,
+    }))
+  }
+
+  /**
+   * 获取模拟设备点位数据
+   * @returns {Array} 设备点位数组
+   */
+  const getDevicePoints = () => {
+    return MOCK_DEVICE_POINTS.map((point) => ({
+      ...point,
+      location: `目前为止距离现场${point.distance}公里`,
+    }))
+  }
+
+  /**
+   * 获取所有模拟点位数据（人员 + 设备）
+   * @returns {Array} 所有点位数组
+   */
+  const getAllMockPoints = () => {
+    return [...getPersonnelPoints(), ...getDevicePoints()]
+  }
+
+  /**
+   * 创建人员实体配置
+   * @param {Object} point - 人员点位数据
+   * @param {string} iconUrl - 图标 URL
+   * @returns {Object} Cesium 实体配置
+   */
+  const createPersonnelEntityConfig = (point, iconUrl) => {
+    return {
+      position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
+      billboard: {
+        image: iconUrl,
+        width: MARKER_ICON_SIZE.width,
+        height: MARKER_ICON_SIZE.height,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      },
+      properties: {
+        type: 'soldier',
+        name: point.name,
+        department: point.department,
+        location: point.location,
+        estimatedArrival: point.estimatedArrival,
+      },
+    }
+  }
+
+  /**
+   * 创建设备实体配置
+   * @param {Object} point - 设备点位数据
+   * @param {string} iconUrl - 图标 URL
+   * @returns {Object} Cesium 实体配置
+   */
+  const createDeviceEntityConfig = (point, iconUrl) => {
+    return {
+      position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
+      billboard: {
+        image: iconUrl,
+        width: MARKER_ICON_SIZE.width,
+        height: MARKER_ICON_SIZE.height,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      },
+      properties: {
+        type: 'device',
+        name: point.name,
+        deviceType: point.deviceType,
+        location: point.location,
+        estimatedArrival: point.estimatedArrival,
+      },
+    }
+  }
+
+  /**
+   * 获取动画路径数据
+   * @param {string} pathId - 路径 ID ('path1', 'path2', 'path3')
+   * @returns {Object} 路径数据
+   */
+  const getAnimationPath = (pathId) => {
+    return ANIMATION_PATHS[pathId]
+  }
+
+  /**
+   * 获取所有动画路径
+   * @returns {Object} 所有路径数据
+   */
+  const getAllAnimationPaths = () => {
+    return ANIMATION_PATHS
+  }
+
+  /**
+   * 创建路径起点标记配置
+   * @param {Object} path - 路径数据
+   * @param {string} iconUrl - 图标 URL
+   * @returns {Object} Cesium 实体配置
+   */
+  const createPathStartMarkerConfig = (path, iconUrl) => {
+    const { startPoint, metadata } = path
+
+    return {
+      position: new Cesium.Cartesian3(startPoint.x, startPoint.y, startPoint.z),
+      billboard: {
+        image: iconUrl,
+        width: MARKER_ICON_SIZE.width,
+        height: MARKER_ICON_SIZE.height,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      },
+      properties: {
+        type: metadata.type,
+        name: metadata.name,
+        department: metadata.department || metadata.deviceType,
+        location: '待命中',
+        estimatedArrival: '待启动',
+        isPathStartMarker: true,
+        pathId: path.id,
+      },
+    }
+  }
+
+  /**
+   * 获取视频 URL
+   * @returns {string} 视频 URL
+   */
+  const getVideoUrl = () => {
+    return MOCK_VIDEO_URL
+  }
+
+  return {
+    // 数据获取
+    getPersonnelPoints,
+    getDevicePoints,
+    getAllMockPoints,
+    getAnimationPath,
+    getAllAnimationPaths,
+    getVideoUrl,
+
+    // 实体配置创建
+    createPersonnelEntityConfig,
+    createDeviceEntityConfig,
+    createPathStartMarkerConfig,
+  }
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/usePathLines.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/usePathLines.js
new file mode 100644
index 0000000..3e23dc3
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/usePathLines.js
@@ -0,0 +1,143 @@
+import * as Cesium from 'cesium'
+import { ref } from 'vue'
+import { ANIMATION_PATHS } from '../constants'
+
+/**
+ * 路径线管理
+ *
+ * 职责：
+ * 1. 绘制应急人员和设备的移动路径线
+ * 2. 管理路径线实体的生命周期
+ * 3. 清理路径线资源
+ *
+ * @returns {Object} 路径线管理 API
+ */
+export function usePathLines() {
+  // 路径线实体数组
+  const pathLineEntities = ref([])
+
+  /**
+   * 绘制所有路径线
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Object} options - 可选配置
+   * @param {string} options.color - 路径线颜色（默认红色）
+   * @param {number} options.width - 路径线宽度（默认 5）
+   * @param {boolean} options.clampToGround - 是否贴地（默认 true）
+   */
+  const drawAllPathLines = (viewer, options = {}) => {
+    if (!viewer) {
+      console.warn('[usePathLines] viewer 为空')
+      return
+    }
+
+    const { color = Cesium.Color.RED, width = 5, clampToGround = true } = options
+
+    // 清除旧的路径线
+    clearPathLines(viewer)
+
+    // 绘制所有路径
+    Object.values(ANIMATION_PATHS).forEach((path) => {
+      drawPathLine(viewer, path.waypoints, { color, width, clampToGround })
+    })
+
+    console.log(`[usePathLines] 已绘制 ${pathLineEntities.value.length} 条路径线`)
+  }
+
+  /**
+   * 绘制单条路径线
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {Array} waypoints - 路径点数组
+   * @param {Object} options - 样式配置
+   */
+  const drawPathLine = (viewer, waypoints, options) => {
+    const { color, width, clampToGround } = options
+
+    // 转换坐标点
+    const positions = waypoints.map(
+      (coord) => new Cesium.Cartesian3(coord.x, coord.y, coord.z)
+    )
+
+    // 创建路径线实体
+    const pathEntity = viewer.entities.add({
+      polyline: {
+        positions: positions,
+        width: width,
+        material: color,
+        clampToGround: clampToGround,
+      },
+    })
+
+    pathLineEntities.value.push(pathEntity)
+  }
+
+  /**
+   * 绘制指定路径的路径线
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {string} pathId - 路径 ID ('path1', 'path2', 'path3')
+   * @param {Object} options - 样式配置
+   */
+  const drawPathLineById = (viewer, pathId, options = {}) => {
+    if (!viewer) {
+      console.warn('[usePathLines] viewer 为空')
+      return
+    }
+
+    const path = ANIMATION_PATHS[pathId]
+    if (!path) {
+      console.warn(`[usePathLines] 路径 ${pathId} 不存在`)
+      return
+    }
+
+    const { color = Cesium.Color.RED, width = 5, clampToGround = true } = options
+
+    drawPathLine(viewer, path.waypoints, { color, width, clampToGround })
+  }
+
+  /**
+   * 清除所有路径线
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   */
+  const clearPathLines = (viewer) => {
+    if (!viewer) return
+
+    pathLineEntities.value.forEach((entity) => {
+      if (entity) {
+        viewer.entities.remove(entity)
+      }
+    })
+
+    pathLineEntities.value = []
+    console.log('[usePathLines] 所有路径线已清除')
+  }
+
+  /**
+   * 显示所有路径线
+   */
+  const showPathLines = () => {
+    pathLineEntities.value.forEach((entity) => {
+      if (entity) {
+        entity.show = true
+      }
+    })
+  }
+
+  /**
+   * 隐藏所有路径线
+   */
+  const hidePathLines = () => {
+    pathLineEntities.value.forEach((entity) => {
+      if (entity) {
+        entity.show = false
+      }
+    })
+  }
+
+  return {
+    pathLineEntities,
+    drawAllPathLines,
+    drawPathLineById,
+    clearPathLines,
+    showPathLines,
+    hidePathLines,
+  }
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js
new file mode 100644
index 0000000..ec08b24
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useRangeCircle.js
@@ -0,0 +1,114 @@
+import * as Cesium from 'cesium'
+import { ref } from 'vue'
+import { DISASTER_CENTER, RANGE_CIRCLE_STYLE } from '../constants'
+
+/**
+ * 范围圈管理
+ *
+ * 职责：
+ * 1. 创建和更新范围圈实体
+ * 2. 管理范围圈的样式和可见性
+ * 3. 清理范围圈资源
+ *
+ * @returns {Object} 范围圈管理 API
+ */
+export function useRangeCircle() {
+  // 范围圈实体引用
+  const rangeCircleEntity = ref(null)
+
+  /**
+   * 创建或更新范围圈
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   * @param {number} radiusKm - 半径（公里）
+   * @param {Object} options - 可选配置
+   * @param {number} options.centerLon - 中心点经度（默认使用 DISASTER_CENTER）
+   * @param {number} options.centerLat - 中心点纬度（默认使用 DISASTER_CENTER）
+   * @param {Object} options.style - 样式配置（默认使用 RANGE_CIRCLE_STYLE）
+   */
+  const createOrUpdateRangeCircle = (
+    viewer,
+    radiusKm,
+    options = {}
+  ) => {
+    if (!viewer) {
+      console.warn('[useRangeCircle] viewer 为空')
+      return
+    }
+
+    const {
+      centerLon = DISASTER_CENTER.lon,
+      centerLat = DISASTER_CENTER.lat,
+      style = RANGE_CIRCLE_STYLE,
+    } = options
+
+    const radiusMeters = radiusKm * 1000
+
+    // 如果已存在范围圈，先移除
+    if (rangeCircleEntity.value) {
+      viewer.entities.remove(rangeCircleEntity.value)
+      rangeCircleEntity.value = null
+    }
+
+    // 创建新的范围圈
+    rangeCircleEntity.value = viewer.entities.add({
+      position: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, 0),
+      ellipse: {
+        semiMinorAxis: radiusMeters,
+        semiMajorAxis: radiusMeters,
+        height: 0,
+        material: Cesium.Color.fromCssColorString(style.fillColor).withAlpha(style.fillAlpha),
+        outline: true,
+        outlineColor: Cesium.Color.fromCssColorString(style.outlineColor).withAlpha(
+          style.outlineAlpha
+        ),
+        outlineWidth: style.outlineWidth,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+      },
+    })
+
+    // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点
+    if (rangeCircleEntity.value) {
+      rangeCircleEntity.value.allowPicking = false
+    }
+
+    console.log(`[useRangeCircle] 已创建/更新范围圈: ${radiusKm}km`)
+  }
+
+  /**
+   * 显示范围圈
+   */
+  const showRangeCircle = () => {
+    if (rangeCircleEntity.value) {
+      rangeCircleEntity.value.show = true
+    }
+  }
+
+  /**
+   * 隐藏范围圈
+   */
+  const hideRangeCircle = () => {
+    if (rangeCircleEntity.value) {
+      rangeCircleEntity.value.show = false
+    }
+  }
+
+  /**
+   * 清除范围圈
+   * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+   */
+  const clearRangeCircle = (viewer) => {
+    if (rangeCircleEntity.value && viewer) {
+      viewer.entities.remove(rangeCircleEntity.value)
+      rangeCircleEntity.value = null
+      console.log('[useRangeCircle] 范围圈已清除')
+    }
+  }
+
+  return {
+    rangeCircleEntity,
+    createOrUpdateRangeCircle,
+    showRangeCircle,
+    hideRangeCircle,
+    clearRangeCircle,
+  }
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/cameraPresets.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/cameraPresets.js
new file mode 100644
index 0000000..d7fcc70
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/cameraPresets.js
@@ -0,0 +1,51 @@
+/**
+ * 相机预设配置
+ * 定义常用的相机视角和飞行参数
+ */
+
+/**
+ * 相机飞行动画配置
+ */
+export const CAMERA_FLY_OPTIONS = {
+  duration: 2, // 默认飞行时长（秒）
+  easingFunction: 'CUBIC_IN_OUT', // 缓动函数
+}
+
+/**
+ * 相机视角预设
+ */
+export const CAMERA_PRESETS = {
+  // 鸟瞰视角
+  birdView: {
+    height: 2000,
+    heading: 0,
+    pitch: -90,
+    roll: 0,
+  },
+
+  // 倾斜视角
+  obliqueView: {
+    height: 800,
+    heading: 0,
+    pitch: -45,
+    roll: 0,
+  },
+
+  // 近景视角
+  closeView: {
+    height: 300,
+    heading: 0,
+    pitch: -30,
+    roll: 0,
+  },
+}
+
+/**
+ * 相机边界配置
+ */
+export const CAMERA_BOUNDS = {
+  minHeight: 100, // 最小高度（米）
+  maxHeight: 10000, // 最大高度（米）
+  minPitch: -90, // 最小俯仰角（度）
+  maxPitch: 0, // 最大俯仰角（度）
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/coordinates.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/coordinates.js
new file mode 100644
index 0000000..f32817b
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/coordinates.js
@@ -0,0 +1,59 @@
+/**
+ * 坐标常量定义
+ * 集中管理所有硬编码的坐标数据
+ */
+
+/**
+ * 灾害中心点坐标（经纬度）
+ */
+export const DISASTER_CENTER = {
+  lon: 108.010961,
+  lat: 30.176459,
+}
+
+/**
+ * 默认相机位置（Cartesian3 格式）
+ * 用于初始化相机视角
+ * @deprecated 建议使用 DEFAULT_CAMERA_POSITION 代替
+ */
+export const DEFAULT_CAMERA_CARTESIAN = {
+  x: -1706512.6728840484,
+  y: 5248689.181706353,
+  z: 3187701.2527910336,
+}
+
+/**
+ * 默认相机位置（经纬度格式）
+ * 相机初始对准的地理位置
+ */
+export const DEFAULT_CAMERA_POSITION = {
+  lon: 108.011134,
+  lat: 30.175697,
+}
+
+/**
+ * 默认相机配置
+ * 包含高度、朝向等参数
+ */
+export const DEFAULT_CAMERA_VIEW = {
+  height: 274,
+  heading: 0,
+  pitch: -45,
+  roll: 0,
+}
+
+/**
+ * 范围圈默认半径（公里）
+ */
+export const DEFAULT_SEARCH_RADIUS = 10
+
+/**
+ * 范围圈样式配置
+ */
+export const RANGE_CIRCLE_STYLE = {
+  fillColor: '#1CA1FF',
+  fillAlpha: 0.2,
+  outlineColor: '#1CA1FF',
+  outlineAlpha: 0.8,
+  outlineWidth: 2,
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/index.js
similarity index 51%
rename from packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
rename to packages/screen/src/views/3DSituationalAwarenessRefactor/constants/index.js
index aae4aae..27afcb2 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/index.js
@@ -1,15 +1,20 @@
 /**
- * 3D态势感知常量配置
+ * 常量统一导出
+ * 提供单一入口访问所有常量
  */
 
-import { getVideoUrl } from '@shared/utils'
+export * from './coordinates'
+export * from './mockData'
+export * from './cameraPresets'
+
+// ========== 从原 constants.js 迁移的常量 ==========
 
 // 视频监控视角类型
 export const VIDEO_TYPES = {
-  PERSONNEL: 'personnel', // 单兵视角
-  DRONE: 'drone', // 无人机视角
-  VEHICLE_EXTERNAL: 'vehicle_external', // 指挥车外部视角
-  VEHICLE_MEETING: 'vehicle_meeting' // 指挥车会议视角
+  PERSONNEL: 'personnel',
+  DRONE: 'drone',
+  VEHICLE_EXTERNAL: 'vehicle_external',
+  VEHICLE_MEETING: 'vehicle_meeting',
 }
 
 // 视频监控列表
@@ -18,65 +23,65 @@ export const VIDEO_MONITORS = [
     id: 1,
     type: VIDEO_TYPES.PERSONNEL,
     title: '单兵(张维)设备视角',
-    // videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 从 OSS 获取视频 URL
-    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
-    dateRange: '2025/9/1-2025/12/1', // 日期范围
+    videoSrc:
+      'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4',
+    dateRange: '2025/9/1-2025/12/1',
     hasAudio: true,
     hasMegaphone: true,
     hasZoom: true,
-    hasDirectionControl: false // 是否显示方向控制（操作台）
+    hasDirectionControl: false,
   },
   {
     id: 2,
     type: VIDEO_TYPES.DRONE,
     title: '无人机(001)视角',
-    // videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 从 OSS 获取视频 URL
-    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
+    videoSrc:
+      'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/无人机视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: false,
     hasMegaphone: true,
     hasZoom: true,
-    hasDirectionControl: true // 无人机有方向控制
+    hasDirectionControl: true,
   },
   {
     id: 3,
     type: VIDEO_TYPES.VEHICLE_EXTERNAL,
     title: '指挥车外部视角',
-    // videoSrc: getVideoUrl('demo/ylzg/单兵视角.mp4'), // 暂时使用单兵视角视频
-    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车外部视角.mp4',
+    videoSrc:
+      'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车外部视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: true,
     hasMegaphone: true,
     hasZoom: true,
-    hasDirectionControl: false
+    hasDirectionControl: false,
   },
   {
     id: 4,
     type: VIDEO_TYPES.VEHICLE_MEETING,
     title: '指挥车会议视角',
-    // videoSrc: getVideoUrl('demo/ylzg/无人机视角.mp4'), // 暂时使用无人机视角视频
-    videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车会议视角.mp4',
+    videoSrc:
+      'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/指挥车会议视角.mp4',
     dateRange: '2025/9/1-2025/12/1',
     hasAudio: true,
     hasMegaphone: true,
     hasZoom: true,
-    hasDirectionControl: false
-  }
+    hasDirectionControl: false,
+  },
 ]
 
-// 方向枚举（用于视角控制）
+// 方向枚举
 export const DIRECTIONS = {
   LEFT: 'left',
   RIGHT: 'right',
   UP: 'up',
-  DOWN: 'down'
+  DOWN: 'down',
 }
 
 // 现场设备标签页
 export const DISPATCH_TABS = [
   { key: 'personnel', label: '现场单兵', count: 23 },
   { key: 'equipment', label: '现场设备', count: 21 },
-  { key: 'drone', label: '现场无人机', count: 21 }
+  { key: 'drone', label: '现场无人机', count: 21 },
 ]
 
 // 响应等级
@@ -84,21 +89,21 @@ export const RESPONSE_LEVELS = [
   { value: 1, label: '一级', color: '#FF0624' },
   { value: 2, label: '二级', color: '#FF800B' },
   { value: 3, label: '三级', color: '#FFC107' },
-  { value: 4, label: '四级', color: '#11BB77' }
+  { value: 4, label: '四级', color: '#11BB77' },
 ]
 
 // 地图观看设备功能
 export const DEVICE_WATCH = {
   key: 'watchDevice',
   label: '正在观看卫星设备',
-  icon: '正在观看卫星设备'
+  icon: '正在观看卫星设备',
 }
 
-// 地图测量工具（按设计图顺序排列）
+// 地图测量工具
 export const MAP_TOOLS = [
   { key: 'modelCompare', label: '模型对比', icon: '模型对比' },
   { key: 'measurePosition', label: '测量位置', icon: '测量位置' },
   { key: 'measureDistance', label: '测量距离', icon: '测量距离' },
   { key: 'measureVolume', label: '测量方量', icon: '测量方量' },
-  { key: 'clearPoints', label: '清除点', icon: '清除点' }
+  { key: 'clearPoints', label: '清除点', icon: '清除点' },
 ]
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/mockData.js b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/mockData.js
new file mode 100644
index 0000000..9b3a538
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/constants/mockData.js
@@ -0,0 +1,230 @@
+/**
+ * 模拟数据常量
+ * 用于演示和原型开发，后续可替换为真实 API 数据
+ */
+
+/**
+ * 模拟应急人员点位数据
+ */
+export const MOCK_PERSONNEL_POINTS = [
+  {
+    type: 'soldier',
+    name: '张三',
+    department: '应急救援队',
+    lon: 107.97,
+    lat: 30.25,
+    distance: 2.5,
+    estimatedArrival: '10分钟',
+  },
+  {
+    type: 'soldier',
+    name: '李四',
+    department: '消防队',
+    lon: 107.971901,
+    lat: 30.251428,
+    distance: 2.3,
+    estimatedArrival: '8分钟',
+  },
+  {
+    type: 'soldier',
+    name: '王五',
+    department: '医疗队',
+    lon: 107.974901,
+    lat: 30.241428,
+    distance: 3.1,
+    estimatedArrival: '12分钟',
+  },
+  {
+    type: 'soldier',
+    name: '赵六',
+    department: '应急救援队',
+    lon: 108.047344,
+    lat: 30.164313,
+    distance: 4.2,
+    estimatedArrival: '15分钟',
+  },
+  {
+    type: 'soldier',
+    name: '刘七',
+    department: '消防队',
+    lon: 108.046344,
+    lat: 30.168313,
+    distance: 3.8,
+    estimatedArrival: '14分钟',
+  },
+  {
+    type: 'soldier',
+    name: '陈八',
+    department: '医疗队',
+    lon: 108.050344,
+    lat: 30.170313,
+    distance: 4.5,
+    estimatedArrival: '16分钟',
+  },
+]
+
+/**
+ * 模拟应急装备点位数据
+ */
+export const MOCK_DEVICE_POINTS = [
+  {
+    type: 'device',
+    name: '救援车辆A',
+    deviceType: '消防车',
+    lon: 107.98088,
+    lat: 30.2487,
+    distance: 2.8,
+    estimatedArrival: '11分钟',
+  },
+  {
+    type: 'device',
+    name: '救援车辆B',
+    deviceType: '救护车',
+    lon: 107.97898,
+    lat: 30.2502,
+    distance: 2.6,
+    estimatedArrival: '9分钟',
+  },
+  {
+    type: 'device',
+    name: '无人机A',
+    deviceType: 'DJI',
+    lon: 108.049344,
+    lat: 30.160313,
+    distance: 4.8,
+    estimatedArrival: '17分钟',
+  },
+  {
+    type: 'device',
+    name: '无人机B',
+    deviceType: 'DJI',
+    lon: 108.043344,
+    lat: 30.169313,
+    distance: 3.6,
+    estimatedArrival: '13分钟',
+  },
+]
+
+/**
+ * 动画路径坐标数据
+ * 用于"一键启动"功能的人员和设备移动动画
+ */
+export const ANIMATION_PATHS = {
+  // 路径1：应急救援人员
+  path1: {
+    startPoint: {
+      x: -1706079.1327424292,
+      y: 5247893.165552528,
+      z: 3187993.9339800295,
+    },
+    waypoints: [
+      { x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 },
+      { x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 },
+      { x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 },
+      { x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 },
+      { x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 },
+      { x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 },
+      { x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 },
+      { x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 },
+      { x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 },
+      { x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 },
+      { x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 },
+    ],
+    metadata: {
+      type: 'soldier',
+      name: '应急救援人员',
+      department: '应急救援队',
+    },
+  },
+
+  // 路径2：应急设备车
+  path2: {
+    startPoint: {
+      x: -1706935.1617290622,
+      y: 5248501.604252841,
+      z: 3186498.2137252213,
+    },
+    waypoints: [
+      { x: -1706935.1617290622, y: 5248501.604252841, z: 3186498.2137252213 },
+      { x: -1706870.4952433936, y: 5248490.611178698, z: 3186558.182971472 },
+      { x: -1706837.227189178, y: 5248420.334709732, z: 3186690.581380162 },
+      { x: -1706838.280444158, y: 5248431.37975438, z: 3186708.4743944216 },
+      { x: -1706773.0696515848, y: 5248373.01216906, z: 3186823.943446862 },
+      { x: -1706727.805384834, y: 5248323.242719114, z: 3186915.9148211516 },
+      { x: -1706710.854065587, y: 5248281.031240471, z: 3186987.549384787 },
+      { x: -1706660.1034110512, y: 5248266.553680115, z: 3187047.6342452955 },
+      { x: -1706604.7906532797, y: 5248253.292764083, z: 3187082.311741225 },
+      { x: -1706556.3289747096, y: 5248217.41920621, z: 3187155.538613598 },
+      { x: -1706516.2888762353, y: 5248217.691641104, z: 3187197.012414378 },
+      { x: -1706436.9808225571, y: 5248198.704904958, z: 3187267.311000274 },
+      { x: -1706345.7538517928, y: 5248165.481249246, z: 3187379.4674185305 },
+    ],
+    metadata: {
+      type: 'device',
+      name: '应急设备车',
+      deviceType: '应急装备',
+    },
+  },
+
+  // 路径3：应急救援队员
+  path3: {
+    startPoint: {
+      x: -1707020.4106680197,
+      y: 5248239.972166492,
+      z: 3187000.301322692,
+    },
+    waypoints: [
+      { x: -1707020.4106680197, y: 5248239.972166492, z: 3187000.301322692 },
+      { x: -1706846.822522451, y: 5248275.0303560095, z: 3186986.011771928 },
+      { x: -1706851.3836389545, y: 5248300.681797178, z: 3186942.7035291386 },
+      { x: -1706844.580179418, y: 5248304.977808034, z: 3186932.891914393 },
+      { x: -1706818.9276717228, y: 5248278.222342581, z: 3186976.253684671 },
+      { x: -1706831.3209432173, y: 5248316.447298632, z: 3186957.2249293313 },
+      { x: -1706806.3169318594, y: 5248307.832821272, z: 3186919.6375066047 },
+      { x: -1706805.9829374112, y: 5248319.428155191, z: 3186900.13906115 },
+      { x: -1706795.069820001, y: 5248321.041829423, z: 3186896.925767256 },
+      { x: -1706797.8593846853, y: 5248325.909509062, z: 3186906.0008906457 },
+      { x: -1706806.3364665583, y: 5248330.644777029, z: 3186917.773814682 },
+      { x: -1706778.3135473165, y: 5248282.550132113, z: 3186963.408730601 },
+      { x: -1706750.0602398354, y: 5248252.482706784, z: 3187012.7495610164 },
+      { x: -1706738.0772460685, y: 5248263.416236532, z: 3187023.8067475185 },
+      { x: -1706691.7246759017, y: 5248270.110156667, z: 3187018.588901565 },
+      { x: -1706599.6318286993, y: 5248240.149769867, z: 3187087.254778178 },
+      { x: -1706564.1779400432, y: 5248218.9292086465, z: 3187146.335302665 },
+      { x: -1706486.5598449395, y: 5248207.86588749, z: 3187216.762631293 },
+      { x: -1706445.7375556522, y: 5248203.1875622, z: 3187252.8650745875 },
+      { x: -1706409.1757614242, y: 5248182.077526832, z: 3187307.1294440767 },
+      { x: -1706408.0269636167, y: 5248192.685664652, z: 3187323.2121423096 },
+      { x: -1706390.7352810341, y: 5248211.637499602, z: 3187344.1570185754 },
+    ],
+    metadata: {
+      type: 'soldier',
+      name: '应急救援队员',
+      department: '应急救援队',
+    },
+  },
+}
+
+/**
+ * 视频监控 URL（模拟数据）
+ */
+export const MOCK_VIDEO_URL =
+  'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4'
+
+/**
+ * 标记点图标尺寸配置
+ */
+export const MARKER_ICON_SIZE = {
+  width: 36,
+  height: 40,
+}
+
+/**
+ * 动画配置
+ */
+export const ANIMATION_CONFIG = {
+  duration: 60, // 动画时长（秒）
+  loadingDuration: 3000, // 加载动画时长（毫秒）
+  cameraFlyDuration: 5, // 相机飞行时长（秒）
+  cameraPadding: 0.2, // 相机视野边距（20%）
+}
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
index 291fd7d..c0e7fe1 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue
@@ -205,836 +205,189 @@
 </template>
 
 <script setup>
-import { ref, provide, onMounted } from "vue";
-import * as Cesium from "cesium";
-import { ElMessage } from "element-plus";
-import PageHeader from "./components/PageHeader.vue";
-import LeftPanel from "./components/LeftPanel/index.vue";
-import MapViewer from "./components/MapViewer/index.vue";
-import RightPanel from "./components/RightPanel/index.vue";
-import PersonnelDetail from "./components/Popups/PersonnelDetail.vue";
-import EmergencyCenterDetail from "./components/Popups/EmergencyCenterDetail.vue";
-import VideoModal from "./components/RightPanel/VideoModal.vue";
-import MapTooltip from "./components/shared/MapTooltip.vue";
-import SceneLabel from "./components/SceneLabel.vue";
-import StretchableModal from "./components/shared/StretchableModal.vue";
-import ActionButton from "./components/shared/ActionButton.vue";
-import EmergencyPlanContent from "./components/shared/EmergencyPlanContent.vue";
-import { useDisasterData } from "./composables/useDisasterData";
-import { useDualMapCompare } from "./composables/useDualMapCompare";
-import { useMapMarkers } from "./composables/useMapMarkers";
-import { use3DTiles } from "./composables/use3DTiles";
-import { useMapTooltip } from "./composables/useMapTooltip";
-import { useEntityAnimation } from "./composables/useEntityAnimation";
-import { useMapStore } from "@/map";
-import { request } from "@shared/utils/request";
+/**
+ * 3D 态势感知主页面（重构版）
+ *
+ * 架构说明：
+ * - 使用 Composition API 和 Composable 模式
+ * - 生命周期管理：useCesiumLifecycle 统一管理资源
+ * - 功能模块化：每个功能由独立的 composable 管理
+ * - 数据层分离：硬编码数据移至 constants 目录
+ *
+ * 主要职责：
+ * 1. 组件布局和模板渲染
+ * 2. 子组件编排和事件转发
+ * 3. 生命周期入口（初始化和清理）
+ * 4. 用户交互事件处理
+ */
 
-// 标记点图标
-import emergencyCenterIcon from "./assets/images/应急中心.png";
-import eventIcon from "./assets/images/事件icon.png";
-import soldierIcon from "./assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png";
-import deviceIcon from "./assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png";
-import emergencyBaseIcon from "./assets/images/应急基地.png";
-import reserveCenterIcon from "./assets/images/储备中心.png";
-import mediaIcon from "./assets/images/media.png";
+import { ref, provide, onMounted, onUnmounted } from 'vue'
+import * as Cesium from 'cesium'
+import { ElMessage } from 'element-plus'
 
-// 折叠按钮图标
-import collapseLeftArrow from "./assets/images/折叠面板左箭头.png";
-import collapseRightArrow from "./assets/images/折叠面板右箭头.png";
+// ========== 组件导入 ==========
+import PageHeader from './components/PageHeader.vue'
+import LeftPanel from './components/LeftPanel/index.vue'
+import MapViewer from './components/MapViewer/index.vue'
+import RightPanel from './components/RightPanel/index.vue'
+import PersonnelDetail from './components/Popups/PersonnelDetail.vue'
+import EmergencyCenterDetail from './components/Popups/EmergencyCenterDetail.vue'
+import VideoModal from './components/RightPanel/VideoModal.vue'
+import MapTooltip from './components/shared/MapTooltip.vue'
+import SceneLabel from './components/SceneLabel.vue'
+import StretchableModal from './components/shared/StretchableModal.vue'
+import ActionButton from './components/shared/ActionButton.vue'
+import EmergencyPlanContent from './components/shared/EmergencyPlanContent.vue'
 
-// 使用灾害数据
-const disasterData = useDisasterData();
+// ========== Composables 导入 ==========
+import { useDisasterData } from './composables/useDisasterData'
+import { useDualMapCompare } from './composables/useDualMapCompare'
+import { useMapMarkers } from './composables/useMapMarkers'
+import { use3DTiles } from './composables/use3DTiles'
+import { useEntityAnimation } from './composables/useEntityAnimation'
 
-// 处理距离范围变更
-const handleDistanceChange = async (newDistance) => {
-  console.log(`[index.vue] 距离范围改变为: ${newDistance}km`);
+// 新的 composables
+import { useCesiumLifecycle } from './composables/useCesiumLifecycle'
+import { useMapTooltip } from './composables/useMapTooltip'
+import { useMockData } from './composables/useMockData'
+import { useMapClickHandler } from './composables/useMapClickHandler'
+import { useRangeCircle } from './composables/useRangeCircle'
+import { usePathLines } from './composables/usePathLines'
+import { useEmergencyDispatch } from './composables/useEmergencyDispatch'
 
-  // 更新搜索半径
-  disasterData.updateSearchRadius(newDistance);
+// ========== 工具和常量导入 ==========
+import { useMapStore } from '@/map'
+import { request } from '@shared/utils/request'
+import {
+  DISASTER_CENTER,
+  DEFAULT_CAMERA_CARTESIAN,
+  DEFAULT_CAMERA_POSITION,
+  DEFAULT_CAMERA_VIEW,
+  DEFAULT_SEARCH_RADIUS,
+  MARKER_ICON_SIZE,
+} from './constants'
 
-  // 更新范围圈
-  if (mapStore.viewer) {
-    createOrUpdateRangeCircle(mapStore.viewer, newDistance);
-  }
+// ========== 图标资源导入 ==========
+import emergencyCenterIcon from './assets/images/应急中心.png'
+import eventIcon from './assets/images/事件icon.png'
+import soldierIcon from './assets/images/SketchPngfbec927027ff9e49207749ebaafd229429315341fda199251b6dfb1723ff17fb.png'
+import deviceIcon from './assets/images/SketchPng860d54f2a31f5f441fc6a88081224f1e98534bf6d5ca1246e420983bdf690380.png'
+import emergencyBaseIcon from './assets/images/应急基地.png'
+import reserveCenterIcon from './assets/images/储备中心.png'
+import mediaIcon from './assets/images/media.png'
+import collapseLeftArrow from './assets/images/折叠面板左箭头.png'
+import collapseRightArrow from './assets/images/折叠面板右箭头.png'
 
-  // 重新加载应急资源数据并更新地图标记
-  await loadEmergencyResources(108.011506, 30.175827);
+// ====================
+// 数据层
+// ====================
 
-  // 重新加载储备中心和预置点数据并更新地图标记
-  await loadReserveCentersAndPresets(108.011506, 30.175827);
-};
-
-// 提供给子组件使用
-provide("disasterData", disasterData);
-provide("onDistanceChange", handleDistanceChange);
+// 使用灾害数据 composable
+const disasterData = useDisasterData()
 
 // 地图 store
-const mapStore = useMapStore();
+const mapStore = useMapStore()
+
+// ====================
+// 生命周期管理
+// ====================
+
+// Cesium 资源生命周期管理
+const {
+  registerEventHandler,
+  registerPostRenderListener,
+  registerTimeout,
+  cleanup,
+} = useCesiumLifecycle()
+
+// ====================
+// 地图功能模块
+// ====================
 
 // 双地图对比功能
-const { isCompareMode, toggleCompareMode } = useDualMapCompare();
+const { isCompareMode, toggleCompareMode } = useDualMapCompare()
 
 // 地图标记功能
 const {
   initializeMarkers,
-  clearMarkers,
-  getCollapseCenter,
   addEmergencyResourceMarkers,
   clearEmergencyResourceMarkers,
   addReserveCenterMarkers,
   clearReserveCenterMarkers,
-} = useMapMarkers();
+} = useMapMarkers()
 
-// 地图 Tooltip 功能
-const { tooltipState: mapTooltip, showTooltip, hideTooltip, updateTooltipPosition } = useMapTooltip();
+// 3D Tiles 加载
+const { load3DTileset, waitForTilesetReady } = use3DTiles()
 
-// 实体动画功能
-const { startPersonnelMovement, startMultipleMovements, stopPersonnelMovement, isAnimating } = useEntityAnimation();
+// 地图 Tooltip
+const tooltipComposable = useMapTooltip()
+const { tooltipState: mapTooltip, showTooltip, hideTooltip } = tooltipComposable
 
-// 当前显示 tooltip 的实体（用于相机移动时更新位置）
-const currentTooltipEntity = ref(null);
+// 实体动画
+const entityAnimationComposable = useEntityAnimation()
 
-// 加载动画状态
-const showLoading = ref(false);
+// 模拟数据服务
+const mockDataService = useMockData()
 
-// 默认相机配置
-const DEFAULT_CAMERA_VIEW = {
-  lon: 108.011506,
-  lat: 30.175827,
-  height: 5000,
-  heading: 0,
-  pitch: -45,
-  roll: 0,
-};
+// 范围圈管理
+const rangeCircleComposable = useRangeCircle()
+const { rangeCircleEntity, createOrUpdateRangeCircle, clearRangeCircle } =
+  rangeCircleComposable
 
-// 范围圈实体
-const rangeCircleEntity = ref(null);
+// 路径线管理
+const pathLinesComposable = usePathLines()
+
+// 地图点击事件处理
+const mapClickHandler = useMapClickHandler({
+  tooltipComposable,
+  icons: {
+    soldierIcon,
+    deviceIcon,
+    emergencyCenterIcon,
+    emergencyBaseIcon,
+    reserveCenterIcon,
+  },
+  rangeCircleEntity,
+})
+
+// 应急调度流程
+const { showLoading, startDispatch } = useEmergencyDispatch({
+  pathLinesComposable,
+  entityAnimationComposable,
+  mapStore,
+  registerTimeoutFn: registerTimeout,
+})
+
+// ====================
+// UI 状态
+// ====================
 
 // 面板折叠状态
-const isLeftPanelCollapsed = ref(false);
-const isRightPanelCollapsed = ref(false);
-
-// 切换左侧面板
-const toggleLeftPanel = () => {
-  isLeftPanelCollapsed.value = !isLeftPanelCollapsed.value;
-};
-
-// 切换右侧面板
-const toggleRightPanel = () => {
-  isRightPanelCollapsed.value = !isRightPanelCollapsed.value;
-};
-
-// 3D Tiles加载功能
-const { load3DTileset, waitForTilesetReady } = use3DTiles();
-
-/**
- * 设置地图点击事件处理器
- * 当用户点击地图标记点时，显示 Tooltip
- */
-const setupMapClickHandler = (viewer) => {
-  if (!viewer) return;
-
-  // 创建 ScreenSpaceEventHandler 监听点击事件
-  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-
-  handler.setInputAction((click) => {
-    // 获取点击位置的实体
-    const pickedObject = viewer.scene.pick(click.position);
-
-    if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
-      const entity = pickedObject.id;
-
-      // 过滤掉范围圈实体（通过检查是否是范围圈）
-      if (entity === rangeCircleEntity.value) {
-        console.log('[index.vue] 点击了范围圈，忽略');
-        // 尝试穿透到下面的实体
-        const drillPickedObjects = viewer.scene.drillPick(click.position);
-        let foundMarker = false;
-
-        for (const pickedObj of drillPickedObjects) {
-          if (Cesium.defined(pickedObj.id) && pickedObj.id !== rangeCircleEntity.value) {
-            const markerEntity = pickedObj.id;
-            if (markerEntity.properties) {
-              const type = markerEntity.properties.type?.getValue();
-
-              // 找到标记点，显示 Tooltip
-              if (type === 'soldier') {
-                showMarkerTooltip(viewer, markerEntity, click.position, soldierIcon);
-                foundMarker = true;
-                break;
-              } else if (type === 'device') {
-                showMarkerTooltip(viewer, markerEntity, click.position, deviceIcon);
-                foundMarker = true;
-                break;
-              } else if (type === 'emergencyBase' || type === 'station') {
-                const stationName = markerEntity.properties.name?.getValue() || '';
-                const icon = stationName === '忠县公路交通应急物资储备中心'
-                  ? emergencyCenterIcon
-                  : emergencyBaseIcon;
-                showMarkerTooltip(viewer, markerEntity, click.position, icon);
-                foundMarker = true;
-                break;
-              } else if (type === 'reserveCenter' || type === 'presetPoint') {
-                const icon = type === 'reserveCenter' ? reserveCenterIcon : emergencyBaseIcon;
-                showMarkerTooltip(viewer, markerEntity, click.position, icon);
-                foundMarker = true;
-                break;
-              }
-            }
-          }
-        }
-
-        if (!foundMarker) {
-          hideTooltip();
-          currentTooltipEntity.value = null;
-        }
-        return;
-      }
-
-      // 检查实体是否有 properties（标记点才有）
-      if (entity.properties) {
-        const type = entity.properties.type?.getValue();
-
-        // 根据标记类型显示不同的 Tooltip
-        if (type === 'soldier') {
-          showMarkerTooltip(viewer, entity, click.position, soldierIcon);
-        } else if (type === 'device') {
-          showMarkerTooltip(viewer, entity, click.position, deviceIcon);
-        } else if (type === 'emergencyBase' || type === 'station') {
-          // 对于养护站，根据名称判断使用哪个图标
-          const stationName = entity.properties.name?.getValue() || '';
-          const icon = stationName === '忠县公路交通应急物资储备中心'
-            ? emergencyCenterIcon
-            : emergencyBaseIcon;
-          showMarkerTooltip(viewer, entity, click.position, icon);
-        } else if (type === 'reserveCenter' || type === 'presetPoint') {
-          // 储备中心和预置点
-          const icon = type === 'reserveCenter' ? reserveCenterIcon : emergencyBaseIcon;
-          showMarkerTooltip(viewer, entity, click.position, icon);
-        }
-      }
-    } else {
-      // 点击空白区域，隐藏 Tooltip
-      hideTooltip();
-      currentTooltipEntity.value = null;
-    }
-  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-  // 监听相机移动事件，更新 tooltip 位置
-  viewer.scene.postRender.addEventListener(() => {
-    if (currentTooltipEntity.value && mapTooltip.value.visible) {
-      updateTooltipPositionForEntity(viewer, currentTooltipEntity.value);
-    }
-  });
-};
-
-/**
- * 显示标记点 Tooltip
- * @param {Cesium.Viewer} viewer - Cesium viewer 实例
- * @param {Cesium.Entity} entity - 被点击的实体
- * @param {Cesium.Cartesian2} screenPosition - 点击的屏幕坐标（备用）
- * @param {string} icon - 图标路径
- */
-const showMarkerTooltip = (viewer, entity, screenPosition, icon) => {
-  const properties = entity.properties;
-  const type = properties.type?.getValue();
-
-  // 获取实体的 3D 位置
-  const position = entity.position?.getValue(Cesium.JulianDate.now());
-
-  if (!position) {
-    console.warn('[Tooltip] 无法获取实体位置');
-    return;
-  }
-
-  // 对于使用 CLAMP_TO_GROUND 的 billboard，需要获取实际的地形高度
-  const cartographic = Cesium.Cartographic.fromCartesian(position);
-  let clampedPosition = position;
-
-  // 使用 globe.getHeight 获取地形高度
-  if (viewer.scene.globe) {
-    const height = viewer.scene.globe.getHeight(cartographic);
-    if (Cesium.defined(height)) {
-      cartographic.height = height;
-      clampedPosition = Cesium.Cartographic.toCartesian(cartographic);
-    }
-  }
-
-  // 将贴地后的 3D 坐标转换为屏幕坐标
-  const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition);
-
-  if (!Cesium.defined(canvasPosition)) {
-    console.warn('[Tooltip] 无法转换坐标到屏幕位置');
-    return;
-  }
-
-  // 构建 Tooltip 数据
-  let title = '';
-  const fields = [];
-  const actions = [];
-  let supportVideo = false;
-  let videoTitle = '';
-  const videoSrc = 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/单兵视角.mp4';
-
-  if (type === 'soldier') {
-    // 应急人员
-    title = '应急人员';
-    fields.push(
-      { label: '姓名', value: properties.name?.getValue() || '-' },
-      { label: '部门', value: properties.department?.getValue() || '-' },
-      { label: '位置信息', value: properties.location?.getValue() || '-' },
-      { label: '预计到达时间', value: properties.estimatedArrival?.getValue() || '-' }
-    );
-    actions.push({
-      label: '联动',
-      type: 'link',
-      data: entity
-    });
-  } else if (type === 'device') {
-    // 应急装备
-    title = '应急装备';
-    fields.push(
-      { label: '设备名称', value: properties.name?.getValue() || '-' },
-      { label: '设备类型', value: properties.deviceType?.getValue() || '-' },
-      { label: '位置信息', value: properties.location?.getValue() || '-' },
-      { label: '预计到达时间', value: properties.estimatedArrival?.getValue() || '-' }
-    );
-  } else if (type === 'emergencyBase') {
-    // 应急基地
-    title = '应急基地';
-    fields.push(
-      { label: '基地名称', value: properties.name?.getValue() || '-' },
-      { label: '路线编号', value: properties.routeNumber?.getValue() || '-' },
-      { label: '隶属单位', value: properties.department?.getValue() || '-' },
-      { label: '位置信息', value: properties.location?.getValue() || '-' }
-    );
-    actions.push({
-      label: '连线',
-      type: 'connect',
-      data: entity
-    });
-  } else if (type === 'station') {
-    const stationName = properties.name?.getValue() || '';
-    const distance = properties.distance?.getValue() || 0;
-
-    // 如果是应急中心，显示应急中心信息
-    if (stationName === '忠县公路交通应急物资储备中心') {
-      title = '应急中心';
-      fields.push(
-        { label: '名称', value: '忠县应急中心' },
-        { label: '行政等级', value: '国道' },
-        { label: '隶属单位', value: '交通公路部门' },
-        { label: '位置信息', value: `目前为止距离现场${distance}公里` }
-      );
-      supportVideo = true;
-      videoTitle = '应急中心';
-    } else {
-      // 其他养护站显示 tooltip
-      title = '养护站';
-      fields.push(
-        { label: '名称', value: stationName || '-' },
-        { label: '距离', value: `${distance}公里` }
-      );
-    }
-  } else if (type === 'reserveCenter') {
-    // 储备中心
-    title = '储备中心';
-    fields.push(
-      { label: '名称', value: properties.name?.getValue() || '-' },
-      { label: '位置信息', value: properties.location?.getValue() || '-' }
-    );
-    supportVideo = true;
-    videoTitle = '储备中心';
-  } else if (type === 'presetPoint') {
-    // 预置点
-    title = '预置点';
-    fields.push(
-      { label: '名称', value: properties.name?.getValue() || '-' },
-      { label: '位置信息', value: properties.location?.getValue() || '-' }
-    );
-    supportVideo = true;
-    videoTitle = '预置点';
-  }
-
-  // 显示 Tooltip，使用实体的屏幕坐标
-  showTooltip({
-    x: canvasPosition.x,
-    y: canvasPosition.y,
-    title,
-    icon,
-    data: {
-      fields,
-      actions: actions.length > 0 ? actions : undefined,
-      supportVideo,
-      videoTitle,
-      videoSrc
-    }
-  });
-
-  // 保存当前实体，用于相机移动时更新位置
-  currentTooltipEntity.value = entity;
-};
-
-/**
- * 更新 Tooltip 位置（当相机移动时）
- * @param {Cesium.Viewer} viewer - Cesium viewer 实例
- * @param {Cesium.Entity} entity - 实体对象
- */
-const updateTooltipPositionForEntity = (viewer, entity) => {
-  const position = entity.position?.getValue(Cesium.JulianDate.now());
-
-  if (!position) return;
-
-  // 对于使用 CLAMP_TO_GROUND 的 billboard，需要获取实际的地形高度
-  const cartographic = Cesium.Cartographic.fromCartesian(position);
-  let clampedPosition = position;
-
-  // 使用 globe.getHeight 获取地形高度
-  if (viewer.scene.globe) {
-    const height = viewer.scene.globe.getHeight(cartographic);
-    if (Cesium.defined(height)) {
-      cartographic.height = height;
-      clampedPosition = Cesium.Cartographic.toCartesian(cartographic);
-    }
-  }
-
-  // 将贴地后的 3D 坐标转换为屏幕坐标
-  const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition);
-
-  // 如果标记点在视野外，隐藏 tooltip
-  if (!Cesium.defined(canvasPosition)) {
-    hideTooltip();
-    currentTooltipEntity.value = null;
-    return;
-  }
-
-  updateTooltipPosition(canvasPosition.x, canvasPosition.y);
-};
-
-// 初始化地图
-onMounted(() => {
-  // 等待地图就绪后配置初始视图和模型对比图层
-  mapStore.onReady(async () => {
-    const { camera } = mapStore.services();
-    const viewer = mapStore.viewer;
-
-    console.log("3D态势感知地图已就绪");
-
-    // 默认点加上图标标记，使用图片图标，图标路径为 packages\screen\src\views\3DSituationalAwarenessRefactor\assets\images\应急基地.png
-    const defaultPoint = new Cesium.Entity({
-      position: Cesium.Cartesian3.fromDegrees(
-        DEFAULT_CAMERA_VIEW.lon,
-        DEFAULT_CAMERA_VIEW.lat,
-        0
-      ),
-      billboard: {
-        image: eventIcon,
-        width: 36,
-        height: 36,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY,
-      },
-    });
-    viewer.entities.add(defaultPoint);
-
-    // 在默认点附近添加10个模拟点位（应急人员和应急装备）
-    const simulatedPoints = [
-      // 应急人员 (6个)
-      { type: 'soldier', name: '张三', department: '应急救援队', lon: 107.97, lat: 30.25, distance: 2.5, estimatedArrival: '10分钟', icon: soldierIcon },
-      { type: 'soldier', name: '李四', department: '消防队', lon: 107.971901, lat: 30.251428, distance: 2.3, estimatedArrival: '8分钟', icon: soldierIcon },
-      { type: 'soldier', name: '王五', department: '医疗队', lon: 107.974901, lat: 30.241428, distance: 3.1, estimatedArrival: '12分钟', icon: soldierIcon },
-      { type: 'soldier', name: '赵六', department: '应急救援队', lon: 108.047344, lat: 30.164313, distance: 4.2, estimatedArrival: '15分钟', icon: soldierIcon },
-      { type: 'soldier', name: '刘七', department: '消防队', lon: 108.046344, lat: 30.168313, distance: 3.8, estimatedArrival: '14分钟', icon: soldierIcon },
-      { type: 'soldier', name: '陈八', department: '医疗队', lon: 108.050344, lat: 30.170313, distance: 4.5, estimatedArrival: '16分钟', icon: soldierIcon },
-      // 应急装备 (4个)
-      { type: 'device', name: '救援车辆A', deviceType: '消防车', lon: 107.98088, lat: 30.2487, distance: 2.8, estimatedArrival: '11分钟', icon: deviceIcon },
-      { type: 'device', name: '救援车辆B', deviceType: '救护车', lon: 107.97898, lat: 30.2502, distance: 2.6, estimatedArrival: '9分钟', icon: deviceIcon },
-      { type: 'device', name: '无人机A', deviceType: 'DJI', lon: 108.049344, lat: 30.160313, distance: 4.8, estimatedArrival: '17分钟', icon: deviceIcon },
-      { type: 'device', name: '无人机B', deviceType: 'DJI', lon: 108.043344, lat: 30.169313, distance: 3.6, estimatedArrival: '13分钟', icon: deviceIcon }
-    ];
-
-    simulatedPoints.forEach(point => {
-      const entity = viewer.entities.add({
-        position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat, 0),
-        billboard: {
-          image: point.icon,
-          width: 36,
-          height: 40,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY,
-        },
-        properties: point.type === 'soldier'
-          ? {
-              type: 'soldier',
-              name: point.name,
-              department: point.department,
-              location: `目前为止距离现场${point.distance}公里`,
-              estimatedArrival: point.estimatedArrival
-            }
-          : {
-              type: 'device',
-              name: point.name,
-              deviceType: point.deviceType,
-              location: `目前为止距离现场${point.distance}公里`,
-              estimatedArrival: point.estimatedArrival
-            }
-      });
-    });
-
-    console.log(`[index.vue] 已添加 ${simulatedPoints.length} 个模拟点位`);
-
-    // 添加三组路径动画的起点标记（用于"一键启动"）
-    // 路径1起点（原有人员）
-    const path1Start = new Cesium.Cartesian3(-1706079.1327424292, 5247893.165552528, 3187993.9339800295);
-    const path1StartEntity = viewer.entities.add({
-      position: path1Start,
-      billboard: {
-        image: soldierIcon,
-        width: 36,
-        height: 40,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY,
-      },
-      properties: {
-        type: 'soldier',
-        name: '应急救援人员',
-        department: '应急救援队',
-        location: '待命中',
-        estimatedArrival: '待启动',
-        isPathStartMarker: true,
-        pathId: 'path1'
-      }
-    });
-
-    // 路径2起点（设备组）
-    const path2Start = new Cesium.Cartesian3(-1706935.1617290622, 5248501.604252841, 3186498.2137252213);
-    const path2StartEntity = viewer.entities.add({
-      position: path2Start,
-      billboard: {
-        image: deviceIcon,
-        width: 36,
-        height: 40,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY,
-      },
-      properties: {
-        type: 'device',
-        name: '应急设备车',
-        deviceType: '应急装备',
-        location: '待命中',
-        estimatedArrival: '待启动',
-        isPathStartMarker: true,
-        pathId: 'path2'
-      }
-    });
-
-    // 路径3起点（人员组2）
-    const path3Start = new Cesium.Cartesian3(-1707020.4106680197, 5248239.972166492, 3187000.301322692);
-    const path3StartEntity = viewer.entities.add({
-      position: path3Start,
-      billboard: {
-        image: soldierIcon,
-        width: 36,
-        height: 40,
-        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-        disableDepthTestDistance: Number.POSITIVE_INFINITY,
-      },
-      properties: {
-        type: 'soldier',
-        name: '应急救援队员',
-        department: '应急救援队',
-        location: '待命中',
-        estimatedArrival: '待启动',
-        isPathStartMarker: true,
-        pathId: 'path3'
-      }
-    });
-
-    console.log('[index.vue] 已添加 3 个路径起点标记');
-
-
-    // camera.setView({
-    //   ...DEFAULT_CAMERA_VIEW,
-    // });
-    camera.flyTo({
-      ...DEFAULT_CAMERA_VIEW,
-      duration: 1,
-    });
-
-    // 设置地图点击事件监听 - 显示 Tooltip
-    setupMapClickHandler(viewer);
-
-    // 延迟 1000ms 后设置相机到默认位置
-    // setTimeout(() => {
-    //   camera.flyTo({
-    //     ...DEFAULT_CAMERA_VIEW,
-    //     duration: 1,
-    //   });
-    // }, 5000);
-    // return;
-
-    /**
-     * 设置相机到指定的笛卡尔坐标
-     * @param {Cesium.Cartesian3 | null} cartesian - 目标位置
-     * @returns {boolean} 是否成功设置
-     */
-    const focusCameraOnCartesian = (cartesian) => {
-      if (!cartesian) return false;
-
-      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-      const centerLon = Cesium.Math.toDegrees(cartographic.longitude);
-      const centerLat = Cesium.Math.toDegrees(cartographic.latitude);
-
-      console.log(
-        `设置相机对准塌陷区域中心: 经度 ${centerLon.toFixed(
-          6
-        )}, 纬度 ${centerLat.toFixed(6)}`
-      );
-
-      camera.setView({
-        ...DEFAULT_CAMERA_VIEW,
-        lon: centerLon,
-        lat: centerLat,
-      });
-      return true;
-    };
-
-    // 步骤1: 提前获取塌陷区域中心点（不依赖地形加载）
-    // 如果成功获取，先设置相机对准该区域，让用户看到目标区域
-    const collapseCenter = getCollapseCenter();
-    let hasCameraTarget = focusCameraOnCartesian(collapseCenter);
-
-    if (!hasCameraTarget) {
-      console.warn("无法获取塌陷区域中心，使用默认相机位置");
-      camera.setView(DEFAULT_CAMERA_VIEW);
-    }
-
-    // 步骤2: 加载3D Tiles（灾后场景）并等待完全就绪
-    // 这一步至关重要，必须等待瓦片加载完成后才能准确采样地面高度
-    try {
-      console.log("[index.vue] 开始加载3D模型...");
-      const afterTileset = await load3DTileset(viewer, "after", false);
-
-      if (afterTileset) {
-        console.log("[index.vue] 等待3D模型完全就绪（包括首批瓦片）...");
-        await waitForTilesetReady(afterTileset);
-        console.log("[index.vue] 3D模型已完全就绪");
-      } else {
-        console.warn("[index.vue] 3D模型加载返回 null");
-      }
-    } catch (error) {
-      console.error("[index.vue] 3D模型加载失败:", error);
-    }
-
-    // 步骤3: 初始化地图标记（单兵、设备、应急基地等）
-    // 此时3D Tiles已加载完成，可以安全添加标记
-    try {
-      console.log("[index.vue] 开始初始化地图标记...");
-      const sampledCollapseCenter = await initializeMarkers(viewer, {
-        useSampledHeights: true, // 使用采样高度，确保标记位置准确
-        heightOffset: 100, // 标记相对地面100米（与 WuRenJi 保持一致）
-      });
-
-      // 如果之前没有设置相机（配置数据缺失），现在再次尝试
-      if (!hasCameraTarget && sampledCollapseCenter) {
-        hasCameraTarget = focusCameraOnCartesian(sampledCollapseCenter);
-      }
-
-      console.log("[index.vue] 地图标记初始化完成");
-      // camera.setView({
-      //   ...DEFAULT_CAMERA_VIEW,
-      // })
-    } catch (error) {
-      console.error("[index.vue] 地图标记初始化失败:", error);
-      // 即使标记初始化失败，也要确保相机位置正确
-      if (!hasCameraTarget) {
-        console.warn("[index.vue] 标记初始化失败且无相机目标，使用默认位置");
-        // camera.setView(DEFAULT_CAMERA_VIEW)
-      }
-    }
-
-    // 创建初始范围圈（使用当前搜索半径）
-    createOrUpdateRangeCircle(viewer, disasterData.forcePreset.value.searchRadius);
-  });
-});
-
-// 根据经纬度加载养护站数据 /disaster/matchEmergencyResources
-const loadEmergencyResources = async (longitude, latitude) => {
-  try {
-    const response = await request({
-      url: `/snow-ops-platform/disaster/matchEmergencyResources`,
-      method: "GET",
-      params: {
-        longitude,
-        latitude,
-        maxDistance: disasterData.forcePreset.value.searchRadius,
-      },
-    });
-
-    if (response?.data) {
-      // 更新力量预置数据
-      disasterData.updateForcePreset(response.data);
-      console.log("[index.vue] 应急资源数据加载成功:", response.data);
-
-      // 更新地图标记
-      if (mapStore.viewer) {
-        console.log("[index.vue] 更新地图应急资源标记...");
-
-        // 清除旧的应急资源标记
-        clearEmergencyResourceMarkers(mapStore.viewer);
-
-        // 添加新的应急资源标记
-        await addEmergencyResourceMarkers(
-          mapStore.viewer,
-          response.data,
-          { longitude, latitude },
-          { heightOffset: 10 }
-        );
-      } else {
-        console.warn("[index.vue] 地图viewer未就绪，跳过标记更新");
-      }
-    } else {
-      console.warn("[index.vue] 应急资源接口返回数据为空");
-    }
-
-    return response;
-  } catch (error) {
-    console.error("[index.vue] 加载应急资源数据失败:", error);
-    ElMessage.warning({
-      message: "应急资源数据加载失败,使用默认数据",
-      duration: 3000,
-    });
-    return null;
-  }
-};
-
-// 加载储备中心和预置点数据
-const loadReserveCentersAndPresets = async (longitude, latitude) => {
-  try {
-    const response = await request({
-      url: `/snow-ops-platform/yhYjll/list`,
-      method: "GET",
-      params: {
-        longitude,
-        latitude,
-        maxDistance: disasterData.forcePreset.value.searchRadius,
-      },
-    });
-
-    if (response?.data && Array.isArray(response.data)) {
-      console.log("[index.vue] 储备中心和预置点数据加载成功:", response.data);
-
-      // 更新地图标记
-      if (mapStore.viewer) {
-        console.log("[index.vue] 添加储备中心和预置点地图标记...");
-
-        // 清除旧的标记
-        clearReserveCenterMarkers(mapStore.viewer);
-
-        // 添加新的标记
-        await addReserveCenterMarkers(
-          mapStore.viewer,
-          response.data,
-          { heightOffset: 10 }
-        );
-      } else {
-        console.warn("[index.vue] 地图viewer未就绪，跳过标记更新");
-      }
-    } else {
-      console.warn("[index.vue] 储备中心和预置点接口返回数据为空");
-    }
-
-    return response;
-  } catch (error) {
-    console.error("[index.vue] 加载储备中心和预置点数据失败:", error);
-    ElMessage.warning({
-      message: "储备中心和预置点数据加载失败",
-      duration: 3000,
-    });
-    return null;
-  }
-};
-
-onMounted(async () => {
-  // 加载应急资源数据(使用默认灾害点坐标)
-  // await loadEmergencyResources(108.011506, 30.175827);
-  const response = await loadEmergencyResources(108.011506, 30.175827);
-
-  // 加载储备中心和预置点数据(使用相同的坐标)
-  await loadReserveCentersAndPresets(108.011506, 30.175827);
-});
-
-/**
- * 处理地图工具变化事件
- * 目前主要处理"模型对比"工具的切换
- *
- * @param {Object} payload - 工具变化事件载荷
- * @param {string} payload.tool - 工具标识
- * @param {boolean} payload.active - 工具是否激活
- */
-const handleMapToolChange = async ({ tool, active }) => {
-  console.log(`地图工具变化: ${tool}, 激活状态: ${active}`);
-
-  if (tool === "modelCompare") {
-    try {
-      // 显示加载提示
-      const loadingMessage = ElMessage({
-        message: active ? "正在启用模型对比..." : "正在关闭模型对比...",
-        type: "info",
-        duration: 0,
-        showClose: false,
-      });
-
-      // 使用新的双地图对比模式
-      await toggleCompareMode(active, mapStore.viewer);
-
-      // 关闭加载提示
-      loadingMessage.close();
-
-      // 显示成功提示
-      ElMessage.success(active ? "模型对比已启用" : "模型对比已关闭");
-    } catch (error) {
-      console.error("切换模型对比模式失败:", error);
-
-      // 显示错误提示
-      ElMessage.error({
-        message: `切换模型对比失败: ${error.message || "未知错误"}`,
-        duration: 3000,
-      });
-    }
-  }
-
-  // 其他工具的处理可以在这里扩展
-  // if (tool === 'measure') { ... }
-};
+const isLeftPanelCollapsed = ref(false)
+const isRightPanelCollapsed = ref(false)
 
 // 弹窗状态
-const showPersonnelDetail = ref(false);
-const showCenterDetail = ref(false);
-const showStretchableModal = ref(false);
-const showVideoModal = ref(false);
+const showPersonnelDetail = ref(false)
+const showCenterDetail = ref(false)
+const showStretchableModal = ref(false)
+const showVideoModal = ref(false)
 
 // 选中的数据
 const selectedPersonnel = ref({
-  name: "张强",
-  department: "安全生产部",
+  name: '张强',
+  department: '安全生产部',
   distance: 0.6,
   estimatedArrival: 10,
   avatar: null,
-});
+})
 
 const selectedCenter = ref({
-  name: "忠县应急中心",
-  adminLevel: "国道",
-  department: "交通公路部门",
+  name: '忠县应急中心',
+  adminLevel: '国道',
+  department: '交通公路部门',
   distance: 0.6,
   image: null,
-});
+})
 
 const selectedVideoMonitor = ref({
   id: '',
@@ -1043,88 +396,73 @@ const selectedVideoMonitor = ref({
   dateRange: '',
   hasMegaphone: false,
   hasAudio: true,
-  hasDirectionControl: false
-});
+  hasDirectionControl: false,
+})
 
-// 返回驾驶舱
+// ====================
+// 事件处理函数
+// ====================
+
+/**
+ * 切换左侧面板
+ */
+const toggleLeftPanel = () => {
+  isLeftPanelCollapsed.value = !isLeftPanelCollapsed.value
+}
+
+/**
+ * 切换右侧面板
+ */
+const toggleRightPanel = () => {
+  isRightPanelCollapsed.value = !isRightPanelCollapsed.value
+}
+
+/**
+ * 返回驾驶舱
+ */
 const handleBack = () => {
-  console.log("返回驾驶舱");
+  console.log('返回驾驶舱')
   // 实际实现：路由跳转
   // router.push('/cockpit')
-};
+}
 
-// 处理人员联动
+/**
+ * 处理人员联动
+ */
 const handlePersonnelLink = (personnel) => {
-  console.log("联动人员:", personnel);
-  // 实际实现：使用 mapStore 的 camera service 飞行到人员位置
-  // const { camera } = mapStore.services()
-  // camera.flyTo({ destination: [lon, lat, height] })
-  showPersonnelDetail.value = false;
-};
+  console.log('联动人员:', personnel)
+  showPersonnelDetail.value = false
+}
 
 /**
  * 处理 Tooltip 操作按钮点击事件
- * @param {Object} action - 操作对象，包含 type 和 data
  */
 const handleTooltipAction = (action) => {
-  console.log('[index.vue] Tooltip 操作按钮点击:', action);
+  console.log('[index.vue] Tooltip 操作按钮点击:', action)
 
   if (action.type === 'link') {
     // 应急人员的"联动"操作
-    const entity = action.data;
-    const properties = entity.properties;
-
-    console.log('[index.vue] 应急人员联动:', {
-      name: properties.name?.getValue(),
-      department: properties.department?.getValue()
-    });
-
-    // 可以在这里实现联动功能，比如：
-    // 1. 飞行到人员位置
-    // 2. 打开详情弹窗
-    // 3. 高亮显示相关信息
-    ElMessage.success(`已联动应急人员: ${properties.name?.getValue() || '未知'}`);
-
-    // 关闭 tooltip
-    hideTooltip();
-    currentTooltipEntity.value = null;
-
+    ElMessage.success(`已联动应急人员: ${action.data.name?.getValue() || '未知'}`)
+    hideTooltip()
   } else if (action.type === 'connect') {
     // 应急基地的"连线"操作
-    const entity = action.data;
-    const properties = entity.properties;
-
-    console.log('[index.vue] 应急基地连线:', {
-      name: properties.name?.getValue(),
-      routeNumber: properties.routeNumber?.getValue()
-    });
-
-    // 可以在这里实现连线功能，比如：
-    // 1. 在地图上绘制线路
-    // 2. 显示路径规划
-    // 3. 计算距离和时间
-    ElMessage.success(`已连线应急基地: ${properties.name?.getValue() || '未知'}`);
-
-    // 关闭 tooltip
-    hideTooltip();
-    currentTooltipEntity.value = null;
+    ElMessage.success(`已连线应急基地: ${action.data.name?.getValue() || '未知'}`)
+    hideTooltip()
   }
-};
+}
 
 /**
  * 关闭地图 Tooltip
- * 统一的关闭入口，便于后续扩展埋点或联动逻辑
  */
 const handleMapTooltipClose = () => {
-  mapTooltip.value.visible = false;
-};
+  mapTooltip.value.visible = false
+}
 
 /**
  * 处理视频图标点击事件
- * 打开视频弹窗并设置视频源
  */
 const handleVideoIconClick = () => {
-  const { data } = mapTooltip.value;
+  const { data } = mapTooltip.value
   if (data && data.supportVideo) {
     selectedVideoMonitor.value = {
       id: Date.now().toString(),
@@ -1133,374 +471,369 @@ const handleVideoIconClick = () => {
       dateRange: new Date().toLocaleDateString(),
       hasMegaphone: false,
       hasAudio: true,
-      hasDirectionControl: false
-    };
-    showVideoModal.value = true;
+      hasDirectionControl: false,
+    }
+    showVideoModal.value = true
   }
-};
+}
 
 /**
  * 处理视频弹窗关闭事件
  */
 const handleVideoModalClose = () => {
-  showVideoModal.value = false;
-};
-
-// 路径线实体引用
-const pathLineEntities = ref([]);
-
-/**
- * 绘制红色路径线
- * @param {Cesium.Viewer} viewer - Cesium viewer 实例
- */
-const drawRedPathLine = (viewer) => {
-  if (!viewer) {
-    console.warn('[index.vue] drawRedPathLine: viewer 为空');
-    return;
-  }
-
-  // 如果已存在路径线，先移除
-  pathLineEntities.value.forEach(entity => {
-    if (entity) viewer.entities.remove(entity);
-  });
-  pathLineEntities.value = [];
-
-  // 路径1坐标点（原有人员路径）
-  const pathCoordinates1 = [
-    { x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 },
-    { x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 },
-    { x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 },
-    { x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 },
-    { x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 },
-    { x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 },
-    { x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 },
-    { x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 },
-    { x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 },
-    { x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 },
-    { x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
-  ];
-
-  // 路径2坐标点（设备组路径）
-  const pathCoordinates2 = [
-    { x: -1706935.1617290622, y: 5248501.604252841, z: 3186498.2137252213 },
-    { x: -1706870.4952433936, y: 5248490.611178698, z: 3186558.182971472 },
-    { x: -1706837.227189178, y: 5248420.334709732, z: 3186690.581380162 },
-    { x: -1706838.280444158, y: 5248431.37975438, z: 3186708.4743944216 },
-    { x: -1706773.0696515848, y: 5248373.01216906, z: 3186823.943446862 },
-    { x: -1706727.805384834, y: 5248323.242719114, z: 3186915.9148211516 },
-    { x: -1706710.854065587, y: 5248281.031240471, z: 3186987.549384787 },
-    { x: -1706660.1034110512, y: 5248266.553680115, z: 3187047.6342452955 },
-    { x: -1706604.7906532797, y: 5248253.292764083, z: 3187082.311741225 },
-    { x: -1706556.3289747096, y: 5248217.41920621, z: 3187155.538613598 },
-    { x: -1706516.2888762353, y: 5248217.691641104, z: 3187197.012414378 },
-    { x: -1706436.9808225571, y: 5248198.704904958, z: 3187267.311000274 },
-    { x: -1706345.7538517928, y: 5248165.481249246, z: 3187379.4674185305 }
-  ];
-
-  // 路径3坐标点（人员组2路径）
-  const pathCoordinates3 = [
-    { x: -1707020.4106680197, y: 5248239.972166492, z: 3187000.301322692 },
-    { x: -1706846.822522451, y: 5248275.0303560095, z: 3186986.011771928 },
-    { x: -1706851.3836389545, y: 5248300.681797178, z: 3186942.7035291386 },
-    { x: -1706844.580179418, y: 5248304.977808034, z: 3186932.891914393 },
-    { x: -1706818.9276717228, y: 5248278.222342581, z: 3186976.253684671 },
-    { x: -1706831.3209432173, y: 5248316.447298632, z: 3186957.2249293313 },
-    { x: -1706806.3169318594, y: 5248307.832821272, z: 3186919.6375066047 },
-    { x: -1706805.9829374112, y: 5248319.428155191, z: 3186900.13906115 },
-    { x: -1706795.069820001, y: 5248321.041829423, z: 3186896.925767256 },
-    { x: -1706797.8593846853, y: 5248325.909509062, z: 3186906.0008906457 },
-    { x: -1706806.3364665583, y: 5248330.644777029, z: 3186917.773814682 },
-    { x: -1706778.3135473165, y: 5248282.550132113, z: 3186963.408730601 },
-    { x: -1706750.0602398354, y: 5248252.482706784, z: 3187012.7495610164 },
-    { x: -1706738.0772460685, y: 5248263.416236532, z: 3187023.8067475185 },
-    { x: -1706691.7246759017, y: 5248270.110156667, z: 3187018.588901565 },
-    { x: -1706599.6318286993, y: 5248240.149769867, z: 3187087.254778178 },
-    { x: -1706564.1779400432, y: 5248218.9292086465, z: 3187146.335302665 },
-    { x: -1706486.5598449395, y: 5248207.86588749, z: 3187216.762631293 },
-    { x: -1706445.7375556522, y: 5248203.1875622, z: 3187252.8650745875 },
-    { x: -1706409.1757614242, y: 5248182.077526832, z: 3187307.1294440767 },
-    { x: -1706408.0269636167, y: 5248192.685664652, z: 3187323.2121423096 },
-    { x: -1706390.7352810341, y: 5248211.637499602, z: 3187344.1570185754 }
-  ];
-
-  // 绘制三条路径线
-  const allPaths = [pathCoordinates1, pathCoordinates2, pathCoordinates3];
-
-  allPaths.forEach((pathCoordinates, index) => {
-    const positions = pathCoordinates.map(coord =>
-      new Cesium.Cartesian3(coord.x, coord.y, coord.z)
-    );
-
-    const pathEntity = viewer.entities.add({
-      polyline: {
-        positions: positions,
-        width: 5,
-        material: Cesium.Color.RED,
-        clampToGround: true
-      }
-    });
-
-    pathLineEntities.value.push(pathEntity);
-  });
-
-  console.log('[index.vue] 已绘制 3 条红色路径线');
-};
+  showVideoModal.value = false
+}
 
 /**
  * 处理力量调度启动事件
- * 显示加载动画，3秒后自动隐藏，然后启动人员移动动画
  */
 const handleStartDispatch = (payload) => {
-  console.log('[index.vue] 启动力量调度:', payload);
-
-  // 显示加载动画
-  showLoading.value = true;
-
-  // 绘制红色路径线
-  if (mapStore.viewer) {
-    drawRedPathLine(mapStore.viewer);
-  }
-
-  // 3秒后隐藏加载动画并启动人员移动
-  setTimeout(() => {
-    showLoading.value = false;
-
-    if (mapStore.viewer) {
-      // 移除路径起点标记（因为动画实体会从起点开始显示）
-      const entitiesToRemove = [];
-      mapStore.viewer.entities.values.forEach(entity => {
-        if (entity.properties && entity.properties.isPathStartMarker) {
-          entitiesToRemove.push(entity);
-        }
-      });
-      entitiesToRemove.forEach(entity => {
-        mapStore.viewer.entities.remove(entity);
-      });
-      console.log(`[index.vue] 已移除 ${entitiesToRemove.length} 个路径起点标记`);
-
-      // 启动应急人员沿路径移动动画
-      console.log('[index.vue] 启动应急人员移动动画...');
-      startPersonnelMovement(mapStore.viewer, {
-        duration: 60, // 60秒完成整个路径，移动更清晰可见
-        trackEntity: false, // 不自动跟随相机（可设为 true 启用跟随）
-        personnelName: '应急救援人员',
-        department: '应急救援队'
-      });
-
-      // 同时启动多组移动动画（设备组 + 人员组2）
-      startMultipleMovements(mapStore.viewer, {
-        duration: 60
-      });
-
-      // 缓慢拉近到能看到所有3组移动实体的全景位置
-      const { camera } = mapStore.services();
-
-      console.log('[index.vue] 相机缓慢飞向最佳全景位置...');
-
-      // 收集所有3组路径的关键点（起点和终点），用于计算最佳视角
-      const allPathPoints = [
-        // 路径1（原有人员）
-        new Cesium.Cartesian3(-1706079.1327424292, 5247893.165552528, 3187993.9339800295),  // 起点
-        new Cesium.Cartesian3(-1706343.1007708232, 5248165.925888667, 3187382.186124808),   // 终点
-        // 路径2（设备组）
-        new Cesium.Cartesian3(-1706935.1617290622, 5248501.604252841, 3186498.2137252213),  // 起点
-        new Cesium.Cartesian3(-1706345.7538517928, 5248165.481249246, 3187379.4674185305),  // 终点
-        // 路径3（人员组2）
-        new Cesium.Cartesian3(-1707020.4106680197, 5248239.972166492, 3187000.301322692),   // 起点
-        new Cesium.Cartesian3(-1706390.7352810341, 5248211.637499602, 3187344.1570185754)   // 终点
-      ];
-
-      // 转换为经纬度格式
-      const trajectoryPoints = allPathPoints.map(point => {
-        const cartographic = Cesium.Cartographic.fromCartesian(point);
-        return {
-          lon: Cesium.Math.toDegrees(cartographic.longitude),
-          lat: Cesium.Math.toDegrees(cartographic.latitude)
-        };
-      });
-
-      // 使用智能聚焦方法飞向能看到所有路径的最佳位置
-      camera.fitBoundsWithTrajectory(trajectoryPoints, {
-        duration: 5,  // 5秒缓慢飞行
-        padding: 0.2  // 20% 边距，确保所有点都在视野内
-      });
-    } else {
-      console.warn('[index.vue] 地图viewer未就绪，无法启动动画');
-    }
-  }, 3000);
-};
+  startDispatch(payload)
+}
 
 /**
  * 处理查看智能应急方案事件
- * 打开智能应急方案弹窗
  */
 const handleViewPlan = (plan) => {
-  console.log('[index.vue] 查看智能应急方案:', plan);
-  showStretchableModal.value = true;
-};
+  console.log('[index.vue] 查看智能应急方案:', plan)
+  showStretchableModal.value = true
+}
 
 /**
  * 处理弹窗中的一键启动按钮点击事件
- * 关闭弹窗并执行一键启动功能
  */
 const handleModalStartDispatch = () => {
-  console.log('[index.vue] 弹窗中点击一键启动');
-
-  // 关闭弹窗
-  showStretchableModal.value = false;
-
-  // 执行一键启动逻辑（与handleStartDispatch相同）
+  console.log('[index.vue] 弹窗中点击一键启动')
+  showStretchableModal.value = false
   handleStartDispatch({
     planName: '智能应急方案',
     plan: disasterData.forceDispatch.value.plan,
     responseLevel: disasterData.forceDispatch.value.responseLevel,
-    estimatedClearTime: disasterData.forceDispatch.value.estimatedClearTime
-  });
-};
+    estimatedClearTime: disasterData.forceDispatch.value.estimatedClearTime,
+  })
+}
 
 /**
- * 创建或更新范围圈
- * @param {Cesium.Viewer} viewer - Cesium viewer 实例
- * @param {number} radiusKm - 半径（公里）
+ * 处理地图工具变化事件
  */
-const createOrUpdateRangeCircle = (viewer, radiusKm) => {
-  if (!viewer) return;
+const handleMapToolChange = async ({ tool, active }) => {
+  console.log(`地图工具变化: ${tool}, 激活状态: ${active}`)
 
-  const centerLon = 108.011506;
-  const centerLat = 30.175827;
-  const radiusMeters = radiusKm * 1000;
+  if (tool === 'modelCompare') {
+    try {
+      const loadingMessage = ElMessage({
+        message: active ? '正在启用模型对比...' : '正在关闭模型对比...',
+        type: 'info',
+        duration: 0,
+        showClose: false,
+      })
 
-  // 如果已存在范围圈，先移除
-  if (rangeCircleEntity.value) {
-    viewer.entities.remove(rangeCircleEntity.value);
-    rangeCircleEntity.value = null;
-  }
+      await toggleCompareMode(active, mapStore.viewer)
 
-  // 创建新的范围圈
-  rangeCircleEntity.value = viewer.entities.add({
-    position: Cesium.Cartesian3.fromDegrees(centerLon, centerLat, 0),
-    ellipse: {
-      semiMinorAxis: radiusMeters,
-      semiMajorAxis: radiusMeters,
-      height: 0,
-      material: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(0.2),
-      outline: true,
-      outlineColor: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(0.8),
-      outlineWidth: 2,
-      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+      loadingMessage.close()
+      ElMessage.success(active ? '模型对比已启用' : '模型对比已关闭')
+    } catch (error) {
+      console.error('切换模型对比模式失败:', error)
+      ElMessage.error({
+        message: `切换模型对比失败: ${error.message || '未知错误'}`,
+        duration: 3000,
+      })
     }
-  });
-
-  // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点
-  if (rangeCircleEntity.value) {
-    rangeCircleEntity.value.allowPicking = false;
   }
-
-  console.log(`[index.vue] 已创建/更新范围圈: ${radiusKm}km`);
-};
+}
 
 /**
- * 在指定屏幕坐标显示地图 Tooltip
- *
- * 使用场景：
- * - 当用户点击地图上的标记点时调用此方法
- * - 调用方需要将地图实体的经纬度转换为屏幕坐标
- *
- * @typedef {Object} MapTooltipField
- * @property {string} label - 字段标签
- * @property {string} value - 字段值
- *
- * @typedef {Object} MapTooltipData
- * @property {MapTooltipField[]} fields - 字段列表
- *
- * @param {Object} options - Tooltip 配置选项
- * @param {number} options.x - 屏幕 X 坐标（像素），相对于地图容器左上角
- * @param {number} options.y - 屏幕 Y 坐标（像素），相对于地图容器左上角
- * @param {string} [options.title=''] - Tooltip 标题文本
- * @param {string} [options.icon=''] - 标题左侧图标的图片路径
- * @param {MapTooltipData} [options.data=null] - 业务数据，用于内容插槽渲染
- *
- * @example
- * // 当点击地图实体时
- * const screenPos = mapStore.worldToScreen(entity.position)
- * showMapTooltip({
- *   x: screenPos.x,
- *   y: screenPos.y,
- *   title: '应急中心',
- *   icon: emergencyCenterIcon,
- *   data: {
- *     fields: [
- *       { label: '名称', value: '忠县应急中心' },
- *       { label: '行政等级', value: '国道' },
- *       { label: '隶属单位', value: '交通公路部门' }
- *     ]
- *   }
- * })
+ * 处理距离范围变更
  */
-const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
-  const state = mapTooltip.value;
-  state.visible = true;
-  state.x = x;
-  state.y = y;
-  state.title = title;
-  state.icon = icon;
-  state.data = data;
-  // zIndex 保持不变，无需重新赋值
-};
+const handleDistanceChange = async (newDistance) => {
+  console.log(`[index.vue] 距离范围改变为: ${newDistance}km`)
+
+  // 更新搜索半径
+  disasterData.updateSearchRadius(newDistance)
+
+  // 更新范围圈
+  if (mapStore.viewer) {
+    createOrUpdateRangeCircle(mapStore.viewer, newDistance)
+  }
+
+  // 重新加载应急资源数据并更新地图标记
+  await loadEmergencyResources(DISASTER_CENTER.lon, DISASTER_CENTER.lat)
+
+  // 重新加载储备中心和预置点数据并更新地图标记
+  await loadReserveCentersAndPresets(DISASTER_CENTER.lon, DISASTER_CENTER.lat)
+}
+
+// ====================
+// 数据加载函数
+// ====================
+
+/**
+ * 加载养护站数据
+ */
+const loadEmergencyResources = async (longitude, latitude) => {
+  try {
+    const response = await request({
+      url: `/snow-ops-platform/disaster/matchEmergencyResources`,
+      method: 'GET',
+      params: {
+        longitude,
+        latitude,
+        maxDistance: disasterData.forcePreset.value.searchRadius,
+      },
+    })
+
+    if (response?.data) {
+      disasterData.updateForcePreset(response.data)
+      console.log('[index.vue] 应急资源数据加载成功:', response.data)
+
+      if (mapStore.viewer) {
+        console.log('[index.vue] 更新地图应急资源标记...')
+        clearEmergencyResourceMarkers(mapStore.viewer)
+        await addEmergencyResourceMarkers(mapStore.viewer, response.data, { longitude, latitude }, { heightOffset: 10 })
+      } else {
+        console.warn('[index.vue] 地图viewer未就绪，跳过标记更新')
+      }
+    } else {
+      console.warn('[index.vue] 应急资源接口返回数据为空')
+    }
+
+    return response
+  } catch (error) {
+    console.error('[index.vue] 加载应急资源数据失败:', error)
+    ElMessage.warning({
+      message: '应急资源数据加载失败,使用默认数据',
+      duration: 3000,
+    })
+    return null
+  }
+}
+
+/**
+ * 加载储备中心和预置点数据
+ */
+const loadReserveCentersAndPresets = async (longitude, latitude) => {
+  try {
+    const response = await request({
+      url: `/snow-ops-platform/yhYjll/list`,
+      method: 'GET',
+      params: {
+        longitude,
+        latitude,
+        maxDistance: disasterData.forcePreset.value.searchRadius,
+      },
+    })
+
+    if (response?.data && Array.isArray(response.data)) {
+      console.log('[index.vue] 储备中心和预置点数据加载成功:', response.data)
+
+      if (mapStore.viewer) {
+        console.log('[index.vue] 添加储备中心和预置点地图标记...')
+        clearReserveCenterMarkers(mapStore.viewer)
+        await addReserveCenterMarkers(mapStore.viewer, response.data, { heightOffset: 10 })
+      } else {
+        console.warn('[index.vue] 地图viewer未就绪，跳过标记更新')
+      }
+    } else {
+      console.warn('[index.vue] 储备中心和预置点接口返回数据为空')
+    }
+
+    return response
+  } catch (error) {
+    console.error('[index.vue] 加载储备中心和预置点数据失败:', error)
+    ElMessage.warning({
+      message: '储备中心和预置点数据加载失败',
+      duration: 3000,
+    })
+    return null
+  }
+}
+
+// ====================
+// 场景初始化函数
+// ====================
+
+/**
+ * 初始化场景
+ */
+const initializeScene = async () => {
+  const viewer = mapStore.viewer
+  if (!viewer) {
+    console.error('[index.vue] viewer 未就绪')
+    return
+  }
+
+  console.log('[index.vue] 开始初始化场景...')
+
+  // 1. 启用模型对比功能（界面立即呈现，模型延迟加载）
+  try {
+    console.log('[index.vue] 启用模型对比功能（不加载左侧模型）...')
+    await toggleCompareMode(true, viewer, { skipLeftModelLoad: true })
+    console.log('[index.vue] 模型对比界面已启用')
+  } catch (error) {
+    console.error('[index.vue] 启用模型对比功能失败:', error)
+  }
+
+  // 2. 定位相机到目标位置
+  console.log('[index.vue] 设置相机到目标位置...')
+  viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(
+      DEFAULT_CAMERA_POSITION.lon,
+      DEFAULT_CAMERA_POSITION.lat,
+      DEFAULT_CAMERA_VIEW.height
+    ),
+    orientation: {
+      heading: Cesium.Math.toRadians(DEFAULT_CAMERA_VIEW.heading),
+      pitch: Cesium.Math.toRadians(DEFAULT_CAMERA_VIEW.pitch),
+      roll: DEFAULT_CAMERA_VIEW.roll,
+    },
+  })
+
+  // 3. 添加模拟点位（人员和设备）
+  const allMockPoints = mockDataService.getAllMockPoints()
+  allMockPoints.forEach((point) => {
+    const config =
+      point.type === 'soldier'
+        ? mockDataService.createPersonnelEntityConfig(point, soldierIcon)
+        : mockDataService.createDeviceEntityConfig(point, deviceIcon)
+    viewer.entities.add(config)
+  })
+  console.log(`[index.vue] 已添加 ${allMockPoints.length} 个模拟点位`)
+
+  // 4. 添加路径起点标记（用于"一键启动"）
+  const allPaths = mockDataService.getAllAnimationPaths()
+  Object.entries(allPaths).forEach(([pathId, path]) => {
+    const icon = path.metadata.type === 'soldier' ? soldierIcon : deviceIcon
+    const config = mockDataService.createPathStartMarkerConfig(
+      { ...path, id: pathId },
+      icon
+    )
+    viewer.entities.add(config)
+  })
+  console.log('[index.vue] 已添加 3 个路径起点标记')
+
+  // 5. 设置地图点击事件监听
+  mapClickHandler.setupClickHandler(viewer, registerEventHandler, registerPostRenderListener)
+
+  // 6. 加载右侧 3D Tiles（灾后模型）
+  try {
+    console.log('[index.vue] 开始加载3D模型...')
+    const afterTileset = await load3DTileset(viewer, 'after', false)
+
+    if (afterTileset) {
+      console.log('[index.vue] 等待3D模型完全就绪...')
+      await waitForTilesetReady(afterTileset)
+      console.log('[index.vue] 3D模型已完全就绪')
+
+      // 等待地形数据准备就绪
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+
+      // 添加中心点标记
+      console.log('[index.vue] 添加中心点标记...')
+      console.log('[index.vue] 中心点标记位置:', DISASTER_CENTER.lon, DISASTER_CENTER.lat)
+      viewer.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(DISASTER_CENTER.lon, DISASTER_CENTER.lat, 0),
+        billboard: {
+          image: eventIcon,
+          width: 36,
+          height: 36,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      })
+      console.log('[index.vue] 中心点标记已添加')
+    }
+  } catch (error) {
+    console.error('[index.vue] 3D模型加载失败:', error)
+  }
+
+  // 7. 延迟加载左侧 3D Tiles（灾前模型）
+  try {
+    console.log('[index.vue] 开始加载左侧灾前模型...')
+    await toggleCompareMode(true, viewer, { loadLeftModel: true })
+    console.log('[index.vue] 左侧灾前模型加载完成')
+  } catch (error) {
+    console.error('[index.vue] 左侧模型加载失败:', error)
+  }
+
+  // 8. 初始化地图标记
+  try {
+    console.log('[index.vue] 开始初始化地图标记...')
+    await initializeMarkers(viewer, {
+      useSampledHeights: true,
+      heightOffset: 100,
+    })
+    console.log('[index.vue] 地图标记初始化完成')
+  } catch (error) {
+    console.error('[index.vue] 地图标记初始化失败:', error)
+  }
+
+  // 9. 创建范围圈
+  createOrUpdateRangeCircle(viewer, disasterData.forcePreset.value.searchRadius)
+
+  // 10. 额外等待确保地形完全就绪（避免标记悬浮）
+  console.log('[index.vue] 等待地形完全就绪...')
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  // 11. 加载应急资源数据（在地形就绪后）
+  console.log('[index.vue] 加载应急资源数据...')
+  await loadEmergencyResources(DISASTER_CENTER.lon, DISASTER_CENTER.lat)
+
+  // 12. 加载储备中心和预置点数据
+  console.log('[index.vue] 加载储备中心和预置点数据...')
+  await loadReserveCentersAndPresets(DISASTER_CENTER.lon, DISASTER_CENTER.lat)
+
+  console.log('[index.vue] 场景初始化完成')
+}
+
+// ====================
+// 生命周期钩子
+// ====================
+
+/**
+ * 组件挂载
+ * 统一的初始化入口
+ */
+onMounted(() => {
+  // 等待地图就绪后初始化场景（数据加载已在 initializeScene 中完成）
+  mapStore.onReady(async () => {
+    console.log('[index.vue] 3D态势感知地图已就绪')
+
+    // 初始化场景（包含所有数据加载）
+    await initializeScene()
+  })
+})
+
+/**
+ * 组件卸载
+ * 清理所有资源
+ */
+onUnmounted(() => {
+  console.log('[index.vue] 组件卸载，开始清理资源...')
+
+  const viewer = mapStore.viewer
+
+  // 清理范围圈
+  if (viewer) {
+    clearRangeCircle(viewer)
+  }
+
+  // 清理地图点击处理器
+  mapClickHandler.destroy()
+
+  // 清理所有 Cesium 资源（由 useCesiumLifecycle 自动执行）
+  cleanup()
+
+  console.log('[index.vue] 资源清理完成')
+})
+
+// ====================
+// Provide 给子组件
+// ====================
+
+provide('disasterData', disasterData)
+provide('onDistanceChange', handleDistanceChange)
 
-// TODO: 实现地图实体点击事件监听
-// 当用户点击地图上的标记点时，显示 Tooltip 或详情弹窗
-//
-// 集成示例（需要先在文件顶部导入图标）：
-// import personnelIcon from './assets/images/personnel-icon.png'
-// import centerIcon from './assets/images/center-icon.png'
-//
-// mapStore.onReady(() => {
-//   const { query } = mapStore.services()
-//
-//   // 监听实体点击事件
-//   query.onEntityClick((entity) => {
-//     // 1. 将实体位置转换为屏幕坐标
-//     // 注意：具体 API 取决于你使用的地图引擎（Cesium/Mapbox/etc.）
-//     const screenPos = mapStore.worldToScreen(entity.position)
-//
-//     // 2. 显示 Tooltip 展示基本信息
-//     if (entity.type === 'personnel') {
-//       showMapTooltip({
-//         x: screenPos.x,
-//         y: screenPos.y,
-//         title: '应急人员',
-//         icon: personnelIcon,
-//         data: {
-//           fields: [
-//             { label: '姓名', value: entity.properties.name },
-//             { label: '部门', value: entity.properties.department },
-//             { label: '距离', value: `${entity.properties.distance}公里` }
-//           ]
-//         }
-//       })
-//     } else if (entity.type === 'center') {
-//       showMapTooltip({
-//         x: screenPos.x,
-//         y: screenPos.y,
-//         title: '应急中心',
-//         icon: centerIcon,
-//         data: {
-//           fields: [
-//             { label: '名称', value: entity.properties.name },
-//             { label: '行政等级', value: entity.properties.adminLevel },
-//             { label: '隶属单位', value: entity.properties.department }
-//           ]
-//         }
-//       })
-//     }
-//
-//     // 3. 如果需要打开详情弹窗，可以在 Tooltip 中添加按钮
-//     // 或者直接在这里同时打开详情弹窗（根据业务需求）
-//     // selectedPersonnel.value = entity.properties
-//     // showPersonnelDetail.value = true
-//   })
-// })
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/types/index.ts b/packages/screen/src/views/3DSituationalAwarenessRefactor/types/index.ts
new file mode 100644
index 0000000..52797df
--- /dev/null
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/types/index.ts
@@ -0,0 +1,247 @@
+/**
+ * 3D 态势感知系统类型定义
+ */
+
+/**
+ * 坐标点
+ */
+export interface Coordinate {
+  lon: number
+  lat: number
+}
+
+/**
+ * Cartesian3 坐标
+ */
+export interface Cartesian3Coordinate {
+  x: number
+  y: number
+  z: number
+}
+
+/**
+ * 相机视角配置
+ */
+export interface CameraView {
+  lon?: number
+  lat?: number
+  height: number
+  heading: number
+  pitch: number
+  roll: number
+}
+
+/**
+ * 人员点位数据
+ */
+export interface PersonnelPoint {
+  type: 'soldier'
+  name: string
+  department: string
+  lon: number
+  lat: number
+  distance: number
+  estimatedArrival: string
+  location?: string
+}
+
+/**
+ * 设备点位数据
+ */
+export interface DevicePoint {
+  type: 'device'
+  name: string
+  deviceType: string
+  lon: number
+  lat: number
+  distance: number
+  estimatedArrival: string
+  location?: string
+}
+
+/**
+ * 动画路径数据
+ */
+export interface AnimationPath {
+  startPoint: Cartesian3Coordinate
+  waypoints: Cartesian3Coordinate[]
+  metadata: {
+    type: 'soldier' | 'device'
+    name: string
+    department?: string
+    deviceType?: string
+  }
+}
+
+/**
+ * Tooltip 字段
+ */
+export interface TooltipField {
+  label: string
+  value: string
+}
+
+/**
+ * Tooltip 操作按钮
+ */
+export interface TooltipAction {
+  label: string
+  type: 'link' | 'connect' | 'view'
+  data: any
+}
+
+/**
+ * Tooltip 数据
+ */
+export interface TooltipData {
+  fields: TooltipField[]
+  actions?: TooltipAction[]
+  supportVideo?: boolean
+  videoTitle?: string
+  videoSrc?: string
+}
+
+/**
+ * Tooltip 状态
+ */
+export interface TooltipState {
+  visible: boolean
+  x: number
+  y: number
+  title: string
+  icon: string
+  zIndex: number
+  data: TooltipData | null
+}
+
+/**
+ * 视频监控数据
+ */
+export interface VideoMonitor {
+  id: string
+  title: string
+  videoSrc: string
+  dateRange: string
+  hasMegaphone: boolean
+  hasAudio: boolean
+  hasDirectionControl: boolean
+}
+
+/**
+ * 人员详情
+ */
+export interface PersonnelDetail {
+  name: string
+  department: string
+  distance: number
+  estimatedArrival: number
+  avatar: string | null
+}
+
+/**
+ * 应急中心详情
+ */
+export interface EmergencyCenterDetail {
+  name: string
+  adminLevel: string
+  department: string
+  distance: number
+  image: string | null
+}
+
+/**
+ * 灾害信息
+ */
+export interface DisasterInfo {
+  type: string
+  volume: number
+  length: number
+  width: number
+  casualties: number
+  location: string
+}
+
+/**
+ * 力量预置信息
+ */
+export interface ForcePreset {
+  equipment: number
+  emergencyBases: number
+  personnel: number
+  searchRadius: number
+  stations: any[]
+}
+
+/**
+ * 力量调度信息
+ */
+export interface ForceDispatch {
+  responseLevel: string
+  estimatedClearTime: string
+  plan: string
+}
+
+/**
+ * 协同信息
+ */
+export interface CollaborationInfo {
+  weatherWarning: any
+  publicSecurity: any
+  mediaCenter: any
+}
+
+/**
+ * 图标配置
+ */
+export interface IconConfig {
+  soldierIcon: string
+  deviceIcon: string
+  emergencyCenterIcon: string
+  emergencyBaseIcon: string
+  reserveCenterIcon: string
+}
+
+/**
+ * 范围圈样式配置
+ */
+export interface RangeCircleStyle {
+  fillColor: string
+  fillAlpha: number
+  outlineColor: string
+  outlineAlpha: number
+  outlineWidth: number
+}
+
+/**
+ * 动画配置
+ */
+export interface AnimationConfig {
+  duration: number
+  loadingDuration: number
+  cameraFlyDuration: number
+  cameraPadding: number
+}
+
+/**
+ * API 响应
+ */
+export interface ApiResponse<T = any> {
+  data: T
+  code?: number
+  message?: string
+}
+
+/**
+ * 应急资源响应数据
+ */
+export interface EmergencyResourcesResponse {
+  stations: any[]
+  equipment: number
+  emergencyBases: number
+  personnel: number
+}
+
+/**
+ * 储备中心和预置点响应数据
+ */
+export type ReserveCentersResponse = any[]