渝路智管 数据修改 修改贴图 地图新增点击事件 让添加的实体5秒跳动效果 地图灾害蓝色虚线修改为红色

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

@@ -108,7 +108,7 @@ const emit = defineEmits(['view-plan', 'start-dispatch'])
  */
 const getLevelText = (level) => {
   const item = RESPONSE_LEVELS.find(l => l.value === level)
-  return item ? `${item.label}` : '三级'
+  return item ? `${item.label}` : '四级'
 }
 
 /**

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

@@ -5,7 +5,7 @@
       <!-- 触发器 -->
       <div class="dropdown-trigger" @click="toggleDropdown">
         <span class="trigger-text"
-          >距离灾害点{{ forcePreset.searchRadius }}km范围内</span
+          >距离灾害点{{ forcePreset.searchRadius - 20 }}km范围内</span
         >
         <div class="trigger-icon" :class="{ 'is-open': isDropdownOpen }">
           <img
@@ -63,6 +63,8 @@
         <div class="stat-group">
           <div class="stat-card stat-card--base">
             <span class="stat-label flexBox"
+              @click="handleJump"
+
               >应急基地与预置点
 
               <img
@@ -133,14 +135,28 @@ import { ref, inject } from "vue";
 const { forcePreset } = inject("disasterData");
 const onDistanceChange = inject("onDistanceChange");
 
+const viewer = inject('cesiumViewer')
+const triggerJump = inject('triggerJump')
+// 触发跳动
+const handleJump = () => {
+  console.log('viewer',viewer.value);
+  console.log('triggerJump',triggerJump);
+
+  
+  if (viewer.value && triggerJump) {
+    
+    triggerJump(5, 10) // 触发5秒跳动，高度10像素
+  }
+}
+
 // 下拉框状态
 const isDropdownOpen = ref(false);
 
 // 距离选项
 const distanceOptions = [
   // { value: 10, label: "距离灾害点10km范围内" },
-  { value: 30, label: "距离灾害点30km范围内" },
+  { value: 30, label: "距离灾害点10km范围内" },
-  { value: 50, label: "距离灾害点50km范围内" },
+  { value: 50, label: "距离灾害点30km范围内" },
 ];
 
 /**

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue

@@ -18,7 +18,8 @@
         <span
           class="info-source"
           :style="{ color: getSourceColor(info.source) }"
-        >[{{ info.source }}]</span>
+          >[{{ info.source }}]</span
+        >
         <span class="info-content">{{ info.content }}</span>
       </div>
     </div>
@@ -26,55 +27,61 @@
 </template>
 
 <script setup>
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed } from "vue";
 
-const { collaborationInfo } = inject('disasterData')
+const { collaborationInfo } = inject("disasterData");
 
 // 折叠状态
-const isCollapsed = ref(false)
+const isCollapsed = ref(false);
 
 // 切换折叠状态
 const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
+  isCollapsed.value = !isCollapsed.value;
-}
+};
 
 // 根据折叠状态显示的信息
 const displayedInfo = computed(() => {
   if (isCollapsed.value && collaborationInfo.value.length > 0) {
     // 折叠时只显示第一条
-    return [collaborationInfo.value[0]]
+    return [collaborationInfo.value[0]];
   }
   // 展开时显示全部
-  return collaborationInfo.value
+  return collaborationInfo.value;
-})
+});
 
 // 根据信息源返回对应的颜色
 const getSourceColor = (source) => {
   const colorMap = {
-    '气象预警': '#4A9EFF',      // 蓝色
+    气象预警: "#4A9EFF", // 蓝色
-    '气象部门': '#4A9EFF',      // 蓝色
+    气象部门: "#4A9EFF", // 蓝色
-    '公安部门': '#FF5555',      // 红色
+    公安部门: "#FF5555", // 红色
-    '交警部门': '#FF5555',      // 红色
+    交警部门: "#FF5555", // 红色
-    '应急管理': '#FF5555',      // 红色
+    应急管理: "#FF5555", // 红色
-    '融媒体中心': '#00D68F',    // 绿色
+    融媒体中心: "#00D68F", // 绿色
-    '新闻中心': '#00D68F',      // 绿色
+    新闻中心: "#00D68F", // 绿色
-    '宣传部门': '#00D68F'       // 绿色
+    宣传部门: "#00D68F", // 绿色
-  }
+  };
 
-  return colorMap[source] || '#4A9EFF' // 默认蓝色
+  return colorMap[source] || "#4A9EFF"; // 默认蓝色
-}
+};
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
+@use "@/styles/mixins.scss" as *;
-@use '../../assets/styles/common.scss' as *;
+@use "../../assets/styles/common.scss" as *;
 
 .collaboration-info {
   position: relative;
   margin-top: vh(12);
-  background: url('../../assets/images/信息面板bg.png') no-repeat center center;
+  background: url("../../assets/images/信息面板bg.png") no-repeat center center;
   background-size: 100% 100%;
   padding: 2px;
+  border: 2px solid transparent;
+  &:hover {
+    border: 2px solid rgba(255, 80, 80, 0.6);
+    box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
+      0 0 35px rgba(255, 0, 0, 0.25);
+  }
 
   &__header {
     position: absolute;
@@ -131,7 +138,7 @@ const getSourceColor = (source) => {
         font-size: fs(13);
         font-family: SourceHanSansCN-Bold, sans-serif;
         font-weight: 700;
-        margin-right: vw(4);  // 信息源和内容之间的小间距
+        margin-right: vw(4); // 信息源和内容之间的小间距
       }
 
       .info-content {

packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue

@@ -143,6 +143,14 @@ onUnmounted(() => {
   // border-radius: vw(8);
   overflow: hidden;
   transition: all 0.3s ease;
+  border: 2px solid transparent;
+
+  &:hover {
+    border: 2px solid rgba(255, 80, 80, 0.6);
+    box-shadow: 0 0 10px rgba(255, 80, 80, 0.6),
+      0 0 20px rgba(255, 0, 0, 0.4),
+      0 0 35px rgba(255, 0, 0, 0.25);
+  }
 
   // 收起状态：只显示标题栏
   &.is-collapsed {

packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue

@@ -1,9 +1,9 @@
 <template>
-  <section class="collapsible-panel" :class="{ 'collapsible-panel--collapsed': isCollapsed }">
+  <section
-    <div
+    class="collapsible-panel"
-      class="collapsible-panel__header"
+    :class="{ 'collapsible-panel--collapsed': isCollapsed }"
-      @click="handleHeaderClick"
+  >
-    >
+    <div class="collapsible-panel__header" @click="handleHeaderClick">
       <PanelHeader :title="title" :subtitle="subtitle">
         <template #title-icon>
           <slot name="title-icon" />
@@ -48,20 +48,20 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref } from "vue";
-import PanelHeader from './PanelHeader.vue'
+import PanelHeader from "./PanelHeader.vue";
-import toggleIcon from '../../assets/images/展开icon.png'
+import toggleIcon from "../../assets/images/展开icon.png";
 
 const props = defineProps({
   /** 面板标题 */
   title: {
     type: String,
-    required: true
+    required: true,
   },
   /** 面板副标题 */
   subtitle: {
     type: String,
-    default: ''
+    default: "",
   },
   /**
    * v-model:collapsed 控制收起状态
@@ -70,97 +70,98 @@ const props = defineProps({
    */
   collapsed: {
     type: Boolean,
-    default: undefined
+    default: undefined,
   },
   /** 是否可收缩 */
   collapsible: {
     type: Boolean,
-    default: true
+    default: true,
   },
   /** 初始是否收起（仅在非受控模式下生效） */
   startCollapsed: {
     type: Boolean,
-    default: false
+    default: false,
-  }
+  },
-})
+});
 
-const emit = defineEmits(['update:collapsed', 'toggle', 'title-click'])
+const emit = defineEmits(["update:collapsed", "toggle", "title-click"]);
 
 // 判断是否受控组件
-const isControlled = computed(() => props.collapsed !== undefined)
+const isControlled = computed(() => props.collapsed !== undefined);
 
 // 内部收起状态
-const internalCollapsed = ref(!!props.startCollapsed)
+const internalCollapsed = ref(!!props.startCollapsed);
 
 // 计算当前收起状态
 const isCollapsed = computed({
   get() {
-    return isControlled.value ? !!props.collapsed : internalCollapsed.value
+    return isControlled.value ? !!props.collapsed : internalCollapsed.value;
   },
   set(value) {
     if (isControlled.value) {
-      emit('update:collapsed', value)
+      emit("update:collapsed", value);
     } else {
-      internalCollapsed.value = value
+      internalCollapsed.value = value;
     }
-    emit('toggle', value)
+    emit("toggle", value);
-  }
+  },
-})
+});
 
 // 处理标题点击事件
 function handleHeaderClick() {
-  emit('title-click')
+  emit("title-click");
 }
 
 // 切换收起/展开
 function toggle() {
-  if (!props.collapsible) return
+  if (!props.collapsible) return;
-  isCollapsed.value = !isCollapsed.value
+  isCollapsed.value = !isCollapsed.value;
 }
 
 // 改进的过渡动画钩子
 function onBeforeEnter(el) {
-  el.style.height = '0'
+  el.style.height = "0";
-  el.style.overflow = 'hidden'
+  el.style.overflow = "hidden";
 }
 
 function onEnter(el) {
   // 使用 requestAnimationFrame 确保动画流畅
   requestAnimationFrame(() => {
-    el.style.height = `${el.scrollHeight}px`
+    el.style.height = `${el.scrollHeight}px`;
-  })
+  });
 }
 
 function onAfterEnter(el) {
-  el.style.height = ''
+  el.style.height = "";
-  el.style.overflow = ''
+  el.style.overflow = "";
 }
 
 function onBeforeLeave(el) {
-  el.style.height = `${el.scrollHeight}px`
+  el.style.height = `${el.scrollHeight}px`;
-  el.style.overflow = 'hidden'
+  el.style.overflow = "hidden";
 }
 
 function onLeave(el) {
   // 强制重排以确保动画触发
-  el.offsetHeight // eslint-disable-line no-unused-expressions
+  el.offsetHeight; // eslint-disable-line no-unused-expressions
-  el.style.height = '0'
+  el.style.height = "0";
 }
 
 function onAfterLeave(el) {
-  el.style.height = ''
+  el.style.height = "";
-  el.style.overflow = ''
+  el.style.overflow = "";
 }
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
+@use "@/styles/mixins.scss" as *;
-@use '../../assets/styles/common.scss' as *;
+@use "../../assets/styles/common.scss" as *;
 
 .collapsible-panel {
   display: flex;
   flex-direction: column;
-  margin-bottom: vh(20);
+  margin-bottom: vh(17);
+  border: 2px solid transparent; /* 防止 hover 时抖动 */
 
   &__header {
     position: relative;
@@ -212,24 +213,24 @@ function onAfterLeave(el) {
 
     // 使用伪元素作为背景层，九宫格实现
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       inset: 0;
       border-style: solid;
       border-width: vh(25) vw(30);
-      border-image-source: url('../../assets/images/通用卡片bg.png');
+      border-image-source: url("../../assets/images/通用卡片bg.png");
       border-image-slice: 25 30 25 30 fill;
       border-image-width: vh(25) vw(30);
       border-image-repeat: stretch;
       box-sizing: border-box;
-      pointer-events: none;  // 不阻挡鼠标事件
+      pointer-events: none; // 不阻挡鼠标事件
-      z-index: -1;  // 放在内容下方
+      z-index: -1; // 放在内容下方
     }
   }
 
   &__content {
     position: relative;
-    padding: vh(5) vw(20) vh(5);  // 留出空间避免被圆角遮挡
+    padding: vh(5) vw(20) vh(5); // 留出空间避免被圆角遮挡
     z-index: 1;
 
     // 如果内容需要滚动
@@ -244,8 +245,14 @@ function onAfterLeave(el) {
   &--collapsed {
     .collapsible-panel__body {
       height: 0;
-      border-width: 0;  // 折叠时移除 border
+      border-width: 0; // 折叠时移除 border
     }
   }
 }
+
+.collapsible-panel:hover {
+  border: 2px solid rgba(255, 80, 80, 0.6); /* 柔和的渐变红基色 */
+  box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
+    0 0 35px rgba(255, 0, 0, 0.25); /* 多层柔光渐变效果 */
+}
 </style>

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

@@ -7,11 +7,11 @@ export function useDisasterData() {
   // 灾害基本信息
   const disasterInfo = ref({
     type: '边坡垮塌',
-    volume: '10022',
+    volume: '1220',
     volumeUnit: 'm³',
-    length: '13',
+    length: '33',
     lengthUnit: 'm',
-    width: '5',
+    width: '15',
     widthUnit: 'm',
     casualties: '0',
     vehicles: '0',
@@ -43,7 +43,7 @@ export function useDisasterData() {
 
   // 力量调度信息
   const forceDispatch = ref({
-    responseLevel: 3, // 三级
+    responseLevel: 4, // 四级
     estimatedClearTime: getCurrentDateTime('24:00'),
     plan: {
       name: '智能应急方案',

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

@@ -1,6 +1,7 @@
 import { ref, onUnmounted } from 'vue'
 import * as Cesium from 'cesium'
 import { use3DTiles } from './use3DTiles'
+import { useMapMarkers } from '../composables/useMapMarkers'
 
 /**
  * 双地图对比模式
@@ -29,6 +30,8 @@ export function useDualMapCompare() {
 
   const { load3DTileset } = use3DTiles()
 
+  const { drawCollapseBoundaryLeft } = useMapMarkers()
+
   /**
    * 初始化左侧Viewer（灾前场景）
    * @param {HTMLElement} container - 容器元素
@@ -502,6 +505,13 @@ export function useDualMapCompare() {
         }
 
         await enableCompareMode(rightViewerInstance, options)
+        const leftContainer = document.getElementById('leftCesiumContainer')
+        if (leftContainer) {
+          console.log('[index.vue] 绘制左侧坍塌边界红色虚线...')
+          drawCollapseBoundaryLeft(leftContainer)
+
+          console.log('[index.vue] 左侧坍塌边界红色虚线已添加')
+        }
       } else {
         disableCompareMode()
       }

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

@@ -107,11 +107,12 @@ export function useMapMarkers() {
   const resolveBillboardHeightReference = (samplingSucceeded) => {
     // 统一使用 CLAMP_TO_GROUND 让 Cesium 自动贴地
     // 配合禁用的 3D Tiles 动态细化，标记位置会保持稳定
-    return Cesium.HeightReference.CLAMP_TO_GROUND
+    // return Cesium.HeightReference.CLAMP_TO_GROUND
+    return Cesium.HeightReference.RELATIVE_TO_GROUND
   }
 
   /**
-   * 绘制坍塌边界蓝色实线（右侧地图）
+   * 绘制坍塌边界红色实线（右侧地图）
    * 在右侧地图上显示灾后坍塌的边界轮廓
    * @param {Cesium.Viewer} viewer
    * @returns {Cesium.Entity | null} 返回创建的边界线实体
@@ -143,12 +144,12 @@ export function useMapMarkers() {
 
     console.log('[useMapMarkers] 右侧坍塌边界点位数量:', positions.length)
 
-    // 创建蓝色实线边界
+    // 创建红色实线边界
     const boundaryEntity = viewer.entities.add({
       polyline: {
         positions: positions,
         width: 4, // 增加线宽，更明显
-        material: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(1.0), // 纯蓝色实线
+        material: Cesium.Color.fromCssColorString('#FF0000').withAlpha(1.0), // 纯红色实线
         clampToGround: true,
         classificationType: Cesium.ClassificationType.BOTH, // 同时分类到地形和3D Tiles
         zIndex: 1 // 提高层级
@@ -161,7 +162,7 @@ export function useMapMarkers() {
     })
 
     collapseBoundaryEntity.value = boundaryEntity
-    console.log('[useMapMarkers] 右侧坍塌边界蓝色实线绘制完成, entityId:', boundaryEntity.id)
+    console.log('[useMapMarkers] 右侧坍塌边界红色实线绘制完成, entityId:', boundaryEntity.id)
 
     // 强制渲染场景
     viewer.scene.requestRender()
@@ -215,7 +216,7 @@ export function useMapMarkers() {
         positions: positions,
         width: 4,
         material: new Cesium.PolylineDashMaterialProperty({
-          color: Cesium.Color.fromCssColorString('#1CA1FF').withAlpha(1.0), // 蓝色
+          color: Cesium.Color.fromCssColorString('#FF0000').withAlpha(1.0), // 红色
           dashLength: 16.0, // 虚线段长度
           dashPattern: 255.0 // 虚线模式
         }),
@@ -578,19 +579,18 @@ export function useMapMarkers() {
         },
         properties: isSoldier
           ? {
-              type: 'soldier',
+            type: 'soldier',
-              name: soldierNames[Math.floor(Math.random() * soldierNames.length)],
+            name: soldierNames[Math.floor(Math.random() * soldierNames.length)],
-              department: soldierDepartments[Math.floor(Math.random() * soldierDepartments.length)],
+            department: soldierDepartments[Math.floor(Math.random() * soldierDepartments.length)],
-              location: `目前为止距离现场${locationDistance}公里`
+            location: `目前为止距离现场${locationDistance}公里`
-            }
+          }
           : {
-              type: 'device',
+            type: 'device',
-              name: deviceNames[Math.floor(Math.random() * deviceNames.length)],
+            name: deviceNames[Math.floor(Math.random() * deviceNames.length)],
-              deviceType: deviceTypes[Math.floor(Math.random() * deviceTypes.length)],
+            deviceType: deviceTypes[Math.floor(Math.random() * deviceTypes.length)],
-              location: `目前为止距离现场${locationDistance}公里`
+            location: `目前为止距离现场${locationDistance}公里`
-            }
+          }
       })
-
       entities.push(entity)
     }
 
@@ -849,6 +849,7 @@ export function useMapMarkers() {
         icon = otherEmergencyIcon
         type = 'other'
         levelName = '其他'
+        // return;
       }
 
       console.log(`[useMapMarkers] 添加标记: ${item.gl1Yjllmc}, 级别: ${levelString} (${levelName})`)
@@ -857,7 +858,7 @@ export function useMapMarkers() {
         position: result.position,
         billboard: {
           image: icon,
-          width: 29,
+          width: 32,
           height: 32,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: resolveBillboardHeightReference(result.samplingSucceeded),
@@ -972,6 +973,96 @@ export function useMapMarkers() {
     }
   }
 
+
+  /**
+* 触发实体像素级跳动动画
+* @param {Cesium.Viewer} viewer
+* @param {number} duration 动画持续时间（秒）
+* @param {number} pixelJumpHeight 像素跳动高度
+*/
+  const triggerJumpAnimation = (viewer, duration = 5, pixelJumpHeight = 30) => {
+    console.log(`[useMapMarkers] 触发像素跳动动画，持续时间 ${duration} 秒，像素高度 ${pixelJumpHeight}`)
+    if (!viewer) {
+      console.warn('[useMapMarkers] triggerJumpAnimation: viewer 为空')
+      return
+    }
+
+    // 收集所有需要动画的实体（包含所有类型）
+    const allEntities = [
+      ...markerEntities.value,
+      ...emergencyResourceEntities.value,
+      ...reserveCenterEntities.value
+    ].filter(e => e.billboard) // 只需要有billboard的实体
+
+    // 存储原始像素偏移量
+    const entitiesData = allEntities.map(entity => ({
+      entity,
+      originalOffset: entity.billboard.pixelOffset
+        ? new Cesium.Cartesian2(
+          entity.billboard.pixelOffset.x,
+          entity.billboard.pixelOffset.y
+        )
+        : new Cesium.Cartesian2(0, 0)
+    }))
+
+    // 动画参数
+    const startTime = Date.now()
+    const jumpDuration = 800 // 单次跳动周期（毫秒）
+    let animationActive = true
+
+    // 定义动画函数
+    const animate = () => {
+      if (!animationActive) return
+
+      const elapsed = Date.now() - startTime
+      const progress = (elapsed % jumpDuration) / jumpDuration
+
+      // 使用正弦波计算当前像素偏移
+      const currentOffset = Math.sin(progress * Math.PI * 2) * pixelJumpHeight
+
+      // 应用像素偏移到所有实体
+      entitiesData.forEach(({ entity, originalOffset }) => {
+        try {
+          entity.billboard.pixelOffset = new Cesium.Cartesian2(
+            originalOffset.x,
+            originalOffset.y - currentOffset // Y轴负方向为上移
+          )
+        } catch (error) {
+          console.warn('[useMapMarkers] 更新实体像素偏移失败:', error)
+        }
+      })
+
+      // 继续动画直到持续时间结束
+      if (elapsed < duration * 1000) {
+        requestAnimationFrame(animate)
+      } else {
+        // 恢复原始像素偏移
+        entitiesData.forEach(({ entity, originalOffset }) => {
+          entity.billboard.pixelOffset = originalOffset
+        })
+        animationActive = false
+        console.log('[useMapMarkers] 像素跳动动画结束')
+      }
+    }
+
+    // 启动动画
+    animate()
+
+    // 提供手动停止方法
+    return () => {
+      if (animationActive) {
+        animationActive = false
+        entitiesData.forEach(({ entity, originalOffset }) => {
+          entity.billboard.pixelOffset = originalOffset
+        })
+        console.log('[useMapMarkers] 像素跳动动画已手动停止')
+      }
+    }
+  }
+
+
+
+
   return {
     collapseAreaEntities,
     markerEntities,
@@ -996,7 +1087,8 @@ export function useMapMarkers() {
     clearEmergencyResourceMarkers,
     addReserveCenterMarkers,
     clearReserveCenterMarkers,
-    getCollapseCenter: calculateCollapseCenter // 提前获取中心点，不依赖标记初始化
+    getCollapseCenter: calculateCollapseCenter, // 提前获取中心点，不依赖标记初始化
+    triggerJumpAnimation,
   }
 }
 

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

@@ -64,6 +64,20 @@ export function useRangeCircle() {
         outlineWidth: style.outlineWidth,
         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       },
+      label: {
+        text: `${radiusKm.toFixed(1) - 20} km`,  // 实际是30 / 50 km 临时修改减少20km 后续调整
+        font: 'bold 24px sans-serif',
+        fillColor: Cesium.Color.WHITE,
+        outlineColor: Cesium.Color.BLACK,
+        outlineWidth: 2,
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        verticalOrigin: Cesium.VerticalOrigin.CENTER,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        pixelOffset: new Cesium.Cartesian2(0, 0),
+        backgroundColor: Cesium.Color.fromCssColorString('#333').withAlpha(0.7),
+        backgroundPadding: new Cesium.Cartesian2(18, 12),
+        showBackground: true
+      }
     })
 
     // 禁用范围圈的鼠标交互，让点击可以穿透到下面的标记点