feat(screen): 为人员移动添加红色路径线可视化

- 在 `useEntityAnimation` 可组合项中更新人员路径坐标
- 在 `index.vue` 中实现 `drawRedPathLine` 函数，在地图上渲染红色折线
- 将路径绘制集成到 `handleStartDispatch` 中，以增强态势感知能力
- 调整 `styles` 中加载 GIF 的最大尺寸，以获得更好的显示效果

packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/index.vue

@@ -4,7 +4,7 @@
       <CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
         <template #title-icon>
           <img
-            src="../../assets/images/摄像头.png"
+            src="../../assets/images/media_dvr_on.png"
             alt="摄像头"
             class="camera-icon"
             @click.stop="handleCameraClick"
@@ -87,8 +87,8 @@ const showVideoModal = ref(false)
 const cameraVideoData = ref({
   id: 999,
   type: 'drone',
-  title: '现场实时监控',
+  title: '快速感知',
-  videoSrc: '',  // 预留视频链接，后续补充
+  videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/快速感知.mp4',  // 预留视频链接，后续补充
   dateRange: '',
   hasAudio: true,
   hasMegaphone: false,

packages/screen/src/views/3DSituationalAwarenessRefactor/composables/useEntityAnimation.js

@@ -18,19 +18,17 @@ export function useEntityAnimation() {
    * 这些坐标定义了人员从起点到终点的移动路径
    */
   const PERSONNEL_PATH_COORDINATES = [
-    { x: -1705480.2641142386, y: 5247435.146513505, z: 3189090.667137187 },
+    { x: -1706079.1327424292, y: 5247893.165552528, z: 3187993.9339800295 },
-    { x: -1705494.4820981335, y: 5247449.285793587, z: 3189060.452114544 },
+    { x: -1706116.7863268533, y: 5247923.177994122, z: 3187929.297700776 },
-    { x: -1705510.0809808762, y: 5247465.767274618, z: 3189023.050648535 },
+    { x: -1706131.4939896727, y: 5247956.7916397555, z: 3187865.1250298577 },
-    { x: -1705511.0338125327, y: 5247476.4118378535, z: 3188998.3643177846 },
+    { x: -1706117.7768181972, y: 5247999.865521995, z: 3187795.4584125844 },
-    { x: -1705515.8155320068, y: 5247491.504151518, z: 3188970.3225750974 },
+    { x: -1706148.232862157, y: 5248029.100250082, z: 3187735.2203392833 },
-    { x: -1705512.9523099929, y: 5247504.710873116, z: 3188943.7936982675 },
+    { x: -1706129.4638550146, y: 5248073.941490989, z: 3187662.59740559 },
-    { x: -1705519.7649184526, y: 5247519.060354441, z: 3188915.1883725724 },
+    { x: -1706131.3071046746, y: 5248086.057462914, z: 3187643.216358425 },
-    { x: -1705528.241912857, y: 5247539.302819527, z: 3188872.220619207 },
+    { x: -1706164.2362053818, y: 5248120.213627388, z: 3187577.1867482658 },
-    { x: -1705530.7649293465, y: 5247548.26353356, z: 3188852.4565014304 },
+    { x: -1706255.3513903276, y: 5248175.916851786, z: 3187422.819624157 },
-    { x: -1705536.847870567, y: 5247562.107401437, z: 3188816.1164027476 },
+    { x: -1706300.2731912779, y: 5248172.011305182, z: 3187397.8767570513 },
-    { x: -1705554.2817406887, y: 5247571.234068825, z: 3188789.6105980803 },
+    { x: -1706343.1007708232, y: 5248165.925888667, z: 3187382.186124808 }
-    { x: -1705573.026007999, y: 5247580.50225183, z: 3188770.244426234 },
-    { x: -1705602.018256302, y: 5247597.236114229, z: 3188743.7470805836 }
   ]
 
   /**

packages/screen/src/views/3DSituationalAwarenessRefactor/constants.js

@@ -17,7 +17,7 @@ export const VIDEO_MONITORS = [
   {
     id: 1,
     type: VIDEO_TYPES.PERSONNEL,
-    title: '单兵(张三三)设备视角',
+    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', // 日期范围
@@ -43,7 +43,7 @@ export const VIDEO_MONITORS = [
     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,
@@ -55,7 +55,7 @@ export const VIDEO_MONITORS = [
     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,

packages/screen/src/views/3DSituationalAwarenessRefactor/index.vue

@@ -977,6 +977,63 @@ const handleMapTooltipClose = () => {
   mapTooltip.value.visible = false;
 };
 
+// 路径线实体引用
+const pathLineEntity = ref(null);
+
+/**
+ * 绘制红色路径线
+ * @param {Cesium.Viewer} viewer - Cesium viewer 实例
+ */
+const drawRedPathLine = (viewer) => {
+  if (!viewer) {
+    console.warn('[index.vue] drawRedPathLine: viewer 为空');
+    return;
+  }
+
+  // 如果已存在路径线，先移除
+  if (pathLineEntity.value) {
+    viewer.entities.remove(pathLineEntity.value);
+    pathLineEntity.value = null;
+  }
+
+  // 路径坐标点
+  const pathCoordinates = [
+    { 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 }
+  ];
+
+  // 将坐标点转换为 Cartesian3 数组
+  const positions = pathCoordinates.map(coord =>
+    new Cesium.Cartesian3(coord.x, coord.y, coord.z)
+  );
+
+  // 创建红色路径线实体
+  pathLineEntity.value = viewer.entities.add({
+    polyline: {
+      positions: positions,
+      width: 5,
+      material: Cesium.Color.RED,
+      clampToGround: true,
+      // 添加发光效果使路径更醒目
+      // material: new Cesium.PolylineGlowMaterialProperty({
+      //   glowPower: 0.3,
+      //   color: Cesium.Color.RED
+      // })
+    }
+  });
+
+  console.log('[index.vue] 红色路径线已绘制');
+};
+
 /**
  * 处理力量调度启动事件
  * 显示加载动画，3秒后自动隐藏，然后启动人员移动动画
@@ -987,6 +1044,11 @@ const handleStartDispatch = (payload) => {
   // 显示加载动画
   showLoading.value = true;
 
+  // 绘制红色路径线
+  if (mapStore.viewer) {
+    drawRedPathLine(mapStore.viewer);
+  }
+
   // 3秒后隐藏加载动画并启动人员移动
   setTimeout(() => {
     showLoading.value = false;
@@ -1463,8 +1525,8 @@ const showMapTooltip = ({ x, y, title = "", icon = "", data = null }) => {
   &__loading-gif {
     width: auto;
     height: auto;
-    max-width: 80%;
+    max-width: 320px;
-    max-height: 60%;
+    max-height: 55px;
     object-fit: contain;
   }
 }